javascript - 按顺序显示所有 promise 的结果

Question

我是 promise 的新手。

我遇到了一个案例，我必须循环执行一系列任务并获取数据。出于某种原因，我必须按顺序进行，并且必须使用 promise 来进行。但令我惊讶的是，结果只有最后一个元素，而不是所有元素。

简化版代码

const _ = require('lodash');

const test = (name) => {
  return new Promise(function(resolve, reject) {
    //This is simplified from my actual code
    resolve(name);
  });
};

const testAll = (arr) => {
  //This chains and returns a series of functions with the order of arr, so that the can be executed in the order, not simultaneously
  let functions = _.map(arr, element => test.bind(null, element));
  //This reduces the functions and is supposed to return an array of all values
  return functions.reduce((fun1, fun2) => fun1.then(fun2), Promise.resolve([]));
}

const arr = ['promise1', 'promise2', 'promise3'];

testAll(arr)
.then(data => console.log(data));

我期望输出(按顺序):

promise1 
promise2
promise3

但我真正得到的只是 promise3。是因为 Promise.resolve([]) 没有包含数组中的每个元素吗？

Answer 1

您似乎想要将各个结果累积到一个数组中。为此，您至少必须从每个 promise 中捕获已解决的值。当您执行 fun1.then(fun2) 时，您丢弃了 fun1 promise 的值。要使用它，您需要对传递给 then 回调的参数做一些事情。在您的情况下，您希望将其与 fun2() 的 promise 值连接起来。

但由于您拥有第一个，但仍必须等待第二个，您可以从 Promise.all 中受益，如下所示:

const testAll = (arr) => {
  let functions = arr.map(element => test.bind(null, element));
  return functions.reduce((prom, fun) => 
      prom.then(data => Promise.all(data.concat(fun())) ),
      Promise.resolve([])
  );
}

现在您对 testAll 的最终调用将为您提供一个数组作为结果。

const test = (name) => {
    return new Promise(function(resolve, reject) {
        setTimeout(_ => { // Introduce delay for better demo
            console.log('.'); // a little trace in the output
            resolve(name); 
        }, 500);
    });
};

const testAll = (arr) => {
  let functions = arr.map(element => test.bind(null, element));
  return functions.reduce((prom, fun) => 
      prom.then(data => Promise.all(data.concat(fun())) ),
      Promise.resolve([])
  );
}

const arr = ['promise1', 'promise2', 'promise3'];

testAll(arr).then(data => console.log(data));