Javascript VueJS：删除多个任务。每个任务一个请求？

我正在重建TaskApp，我有一个“全部完成”按钮和一个“清除已完成”按钮，用于删除所有标记为已完成的任务。应用程序如下所示：

这是clearCompleted方法

clearCompleted: function () {
    var that = this;

    var toBeClearedTasks = this.tasks.filter(function (task) {
        return task.completed;
    });

    toBeClearedTasks.forEach(function (task) {
        that.$http.delete('/api/tasks/' + task.id, task);
    });

    this.tasks = this.tasks.filter(function (task) {
        return !task.completed;
    });
}

如您所见，它有一个forEach函数，它向我的端点发送一个delete-http请求，用于要删除的每个任务

这就引发了一个问题，每当我按下黄色的Complete All按钮时，它就会执行我的completeAll方法，该方法会为每个任务向我的端点发送一个http请求

completeAll: function () {
    var that = this;
    this.tasks.forEach(function (task) {
        task.completed = true;
        that.$http.put('/api/tasks/' + task.id, task);
    });
},

现在我有一个问题，当我点击完成所有按钮，然后点击清除完成的按钮时，当我刷新站点时，任务不会被删除。但是，当我在点击两个按钮之间留出一段时间时，一切都会正常工作，这表明http请求需要一些时间在服务器端执行

---

有没有办法使用队列之类的东西？或者有没有一种方法可以发送一个请求，然后在服务器端使用foreach循环？您将如何解决一个问题，您可能有数百个任务要删除。通过forEach循环为每个和单个任务触发一个删除请求？

假设数据库指示任务是否已完成，我将发送一个清除

的请求和另一个完成
任务的请求

clearCompleted: function () {
  this.$http.put('/api/tasks/clear-completed')

  this.tasks = this.tasks.filter(function (task) {
    return !task.completed
  });
},

completeAll: function () {
  this.$http.put('/api/tasks/complete-all')

  this.tasks.forEach(function (task) {
    task.completed = true
  });
}

我希望我能帮上忙
 您可以通过为api创建更多端点并在服务器上使用forEach循环来解决这个问题，对吗？你可能是说“this.$http.put（'/api/…”，而不是“this.$http.get（'/api/…”。是的，没错！我会更新我的答案以使用
put
请求。我有点挣扎，因为我想让客户做这项工作，但我最终还是同意了你的建议，因为它确实很简单。请解决一件事：更改“this.$http.put（'/api/…'）”改为“this.$http.post（'/api/…'）。然后还要提到使用两个额外的路由：Route:：post（'tasks/complete all'，”TasksController@completeAll“）；路线：：post（'tasks/clear completed'，'TasksController@clearCompleted')；谢谢。我仍然希望我能用前端来完成这项工作，而不是后端，因为我喜欢尽可能少的端点……但我还没有弄明白这一点。