javascript - 一系列 promise 如何与 reduce 一起工作？

Question

我正在阅读这篇文章 HERE ，它讲述了如何使用 reduce with promises，最后显示了以下代码片段:

const tasks = getTaskArray();
return tasks.reduce((promiseChain, currentTask) => {
    return promiseChain.then(chainResults =>
        currentTask.then(currentResult =>
            [ ...chainResults, currentResult ]
        )
    );
}, Promise.resolve([])).then(arrayOfResults => {
    // Do something with all results
});

因此，在不更改太多代码的情况下，我制作了以下演示:

const tasks = [ fetch('https://jsonplaceholder.typicode.com/todos/1') , 
                fetch('https://jsonplaceholder.typicode.com/todos/2') ,   
                fetch('https://jsonplaceholder.typicode.com/todos/3')  ];


tasks.reduce((promiseChain, currentTask) => {

    console.log(promiseChain);  

    return promiseChain.then(chainResults => {
        return currentTask.then(currentResult =>
            [ ...chainResults, currentResult ]
        )
    });
}, Promise.resolve([])).then(arrayOfResults => {
    // Do something with all results
    console.log(arrayOfResults);
});

但我仍然不明白，因为 reduce 简单地只是一个 forEach 循环，在 reduce 内部我们依赖于返回的 promise ，reduce 函数不会循环遍历数组中的所有元素的保证是什么(在这种情况下是一系列 promise )，没有 then() 触发？

Answer 1

好的，阅读完文章后得到更完整的答案。这种策略适用于相互依赖但并不总是相同的异步任务。如果它们是固定结构，您会这样做(来自示例):

return task1.then(result1 =>
    task2.then(result2 =>
        task3.then(result3 =>
            [ result1, result2, result3 ]
        )
    )
).then(arrayOfResults => {
    // Do something with all results
});

从做数据库工作的 Angular 来考虑这一点。

return dbOrm.task1.create()
  .then(newRecord =>
    // task 2 requires the id from the new record to operate
    dbOrm.task2.create({task1_id: newRecord.id})
      .then(result2 =>
        // some other async that relies on result2
        task3(result2).then(result3 =>
            [ result1, result2, result3 ]
        )
    )
).then(arrayOfResults => {
    // Do something with all results
});

这是一组固定的依赖关系，它们相互依赖来运行，你需要它们的结果才能继续。

您链接的示例适用于那种串行执行，但在具有非固定依赖项的情况下。 Reduce 用于同步构建异步操作链，然后可以自行解析，并且由于 reduce 函数返回已解析的 promise ，您可以将另一个函数链接到它的末尾以处理完整的链。

Reduce 不仅仅是 forEach 循环，尽管它们都使用迭代来移动数组。 Reduce 还将上一次迭代的返回结果传递给下一次迭代。您正在将您的一组任务“减少”为一个已完成的任务； forEach 不会改变它正在操作的数组(而 Map，另一个迭代数组函数，从旧数组返回修改后的新数组)。

所以使用示例代码:

const tasks = getTaskArray();
return tasks.reduce((promiseChain, currentTask) => {
    return promiseChain.then(chainResults =>
        currentTask.then(currentResult =>
            [ ...chainResults, currentResult ]
        )
    );
}, Promise.resolve([])).then(arrayOfResults => {
    // Do something with all results
});

给定 2 次迭代，你会得到这样的结果:

// 1
Promise.resolve([])
  .then(chainResults => task1().then(task1Result => ([ ...chainResults, task1Result])

// 2
Promise.resolve([])
  .then(chainResults => task1().then(task1Result => ([ ...chainResults, task1Result])
  .then(chainResults => task2().then(task2Result => ([ ...chainResults, task2Result])

// the then after the reduce
Promise.resolve([])
  .then(chainResults => task1().then(task1Result => ([ ...chainResults, task1Result])
  .then(chainResults => task2().then(task2Result => ([ ...chainResults, task2Result])
  .then(arrayOfResults => //do Something)
  .catch(//because you should handle errors)