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

Question

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

这是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函数，用于向我的端点发送删除http请求，用于要删除的每个单个任务。

这会触发问题，每当我按下黄色完全全部按钮时，它就会执行我的 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循环为每个单个和一个删除请求启动？

Answer 1

假设数据库指示任务是否已完成，我将发送clear请求和另一个complete任务请求。

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
  });
}

我希望我能提供帮助！