JavaScript promise : Executing Promises Sequentially

Question

为了更清楚地理解 promise ，我一直在阅读一些非常有趣的文章。我遇到了以下代码，它非常适合顺序执行 promise 。但我无法理解它是如何工作的。

 function doFirstThing(){
   return new Promise(function(resolve,reject){
       setTimeout(()=>{
           resolve(1);
       },1000)
   })
 }

 function doSecondThing(res){
   return new Promise(function(resolve,reject){
       setTimeout(()=>{
           resolve(res + 1);
       },1000)
   })
 }

 function doThirdThing(res){
   return new Promise(function(resolve,reject){
       setTimeout(()=>{
           resolve(res + 2);
       },1000)
   })
 }
 promiseFactories = [doFirstThing, doSecondThing, doThirdThing];

 function executeSequentially(promiseFactories) {
         var result = Promise.resolve(); // this is the most problematic line 
               promiseFactories.forEach(function (promiseFactory) {
               result = result.then(promiseFactory);// what is happening here ?
    });
    return result;
 }

 executeSequentially(promiseFactories)

我确实理解 promise 会在创建后立即执行。出于某种原因，我无法理解执行流程。尤其是下面这一行:

var result = Promise.resolve()//and empty promise is created.

如果有人能帮助我理解如何在空 promise 的“then”方法中调用 promiseFactory 方法使其按顺序执行，就像这样。还是因为 forEach 循环？

result = result.then(promiseFactory);

我尝试用“map”函数替换“forEach”，但仍然产生了相同的结果。即，按顺序执行的方法。此外，值如何从一个链式函数传递到其他函数？

非常感谢任何帮助或文章/博客。

Answer 1

您可以将 Promise 想象成一个盒子，里面有执行。只要创建了 promise ，就开始执行。要获得结果值，您必须打开盒子。您可以使用 then 来实现它:

Promise.resolve(5).then(result => console.log(result)); // prints 5

如果你想链式 promise ，你可以通过一个一个地打开盒子来实现:

Promise.resolve(5)
  .then(result => Promise.resolve(result + 1))
  .then(result => Promise.resolve(result * 2))
  .then(result => console.log(result));  // prints 12

这种链接使执行同步(一个接一个)。

如果您想异步执行多个 promise (您不链接结果)，您可以使用Promise.all:

Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])
  .then(result => console.log(result));  // prints [1,2,3]

在你的情况下:

Promise.all(promiseFactories).then(result => console.log(result));

另一个使用 promise 的方法是 await 它们:

(async ()=> {
   var res1 = await Promise.resolve(5);
   var res2 = await Promise.resolve(res1 + 1);
   var res3 = await Promise.resolve(res2 * 2);
   console.log(res3); // prints 12
})();

await 的工作方式类似于 then - 它将异步执行变为同步。

在你的情况下:

async function executeSequentially(promiseFactories) {
    for (const p of promiseFactories) {
        const result = await p;
        console.log(result);
    } 
}

注意 await 将一个值打包到开箱即用的 Promise 中:

var res1 = await 5; // same as await Promise.resolve(5)