Vue JS Promise 顺序与并行

Question

我在 VueJS 中有工作代码，但是需要某个块来顺序运行：

  return Promise.all(this.vm.multipleActions.run.map(function (testRun) {
    return self.initiateTest(testRun);
  }))

目前它似乎是并行运行的 - 所以在initialTest()中我将记录插入数据库但是并行让我随机排序而不是按顺序测试运行（我想保留）。

由于并行性质，我可以观察到initialTest() 中随机进行的AJAX 调用。

Answer 1

要让它们按顺序运行，您需要在上一个测试完成后调用initiateTest。

var promise = Promise.resolve();
this.vm.multipleActions.run.forEach(function (testRun) {
    promise = promise.then(function() {
        return self.initiateTest(testRun);
    });
})
return promise;

此代码将创建一个立即解决的初始承诺。每个测试运行都附加到 Promise 的 then 处理程序，因此它们仅在前一个 Promise 解决后执行。

或者进一步缩短它，你可以使用reduce：

return this.vm.multipleActions.run.reduce(function (promise, testRun) {
    return promise.then(function() {
        return self.initiateTest(testRun);
    });
}, Promise.resolve())

Answer 2

如果你想在返回的 promise 中返回 self.initiateTest(testRun) 的结果，就像你的代码对 Promise.all 所做的那样，你可以像这样使用数组 reduce 函数

return this.vm.multipleActions.run.reduce((promise, testRun) =>
    promise.then(results => 
        self.initiateTest(testRun).then(result => {
            results.push(result);
            return results;
        })
    ), Promise.resolve([]) // initial promise to chain to
);

注意：如果使用箭头函数，self.initiateTest 可能是 this.initiateTest - 不过，尚不清楚您的代码中 self 是什么

返回的 Promise 将解析为 self.initiateTest(testRun) 返回的（已解析的）结果数组

以上代码的非ES2015+版本是

return this.vm.multipleActions.run.reduce(function (promise, testRun) {
    return promise.then(function (results) {
        return self.initiateTest(testRun).then(function (result) {
            results.push(result);
            return results;
        });
    });
}, Promise.resolve([]));