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

Question

我正在重建一个 TaskApp，我有一个 "Complete All" 按钮和一个 "Clear Completed" 按钮，可以删除所有已标记为已完成的任务。该应用程序如下所示：

这是 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 请求，用于 每个要删除的任务。

这会触发问题，每当我按下黄色的 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);
    });
},

现在我遇到了问题，当我点击 Complete All 按钮时，紧随其后的是 Clear Completed 按钮，当我刷新网站时，任务不会被删除。但是，当我在按下两个按钮之间给它一些时间时，一切正常，表明 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
  });
}

希望对您有所帮助！

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

VueJS: Delete multiple tasks. Each task one request?

javascript

php

laravel

vue.js