JavaScript承诺：按顺序执行承诺

Question

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

 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)

我确实理解，promises会在创建后立即执行。 由于某种原因，我无法理解执行的流程。 特别是以下这一行：

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

如果有人可以帮助我理解如何在空承诺的'then'方法中调用promiseFactory方法使它按顺序执行，就像这样。 或者是因为forEach循环？

result = result.then(promiseFactory);

我尝试用'map'函数替换'forEach'，但仍产生相同的结果。 即，顺序执行的方法。 另外，值是如何从一个链式函数传递给另一个？

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

Answer 1

如果你想要这样的行为，总是建议使用Promise.all ：

 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) }) } let promiseFactories = [doFirstThing(2), doSecondThing(1), doThirdThing(3)]; Promise.all(promiseFactories) .then(data => { console.log("completed all promises", data); }) 

要一个接一个地顺序运行它：

 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); }, 3000) }) } function doThirdThing(res) { return new Promise(function(resolve, reject) { setTimeout(() => { resolve(res + 2); }, 5000) }) } promiseFactories = [doFirstThing, doSecondThing, doThirdThing]; function executeSequentially(promiseFactories) { promiseFactories.forEach(function(promiseFactory) { promiseFactory(1).then((data) => { console.log(data) }); }); } executeSequentially(promiseFactories); 

Answer 2

您可以将Promise映像为内部执行的框。 就创建承诺而言，执行开始。 要获取结果值，您必须打开该框。 您可以使用then为它：

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

如果你想链接承诺，你可以通过逐个打开框来实现：

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));

如何使用promises的另一个选择是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)

Answer 3

executeSequentially方法一个接一个地返回所有Promises。 它碰巧迭代在promiseFactory ，但它可以写成：

function executeSequentially(promiseFactories) {
  return doFirstThing()
  .then(() => doSecondThing())
  .then(doThirdThing() );
}

它是一样的。 我们基本上回归了一个承诺。

但是，现在我们要迭代一系列承诺。

在迭代时，我们需要将当前的Promise附加到之前的then 。 但forEach不会在每次迭代中暴露下一个Promise - 或前一个Promise。 然而，我们仍然需要它，以便逐一链接Promise。 因此， result '黑客'：

function executeSequentially(promiseFactories) {
  var result = Promise.resolve(); /*We need a thing that keeps yelling 
  the previous promise in every iteration, so we can keep chaining.
  This 'result' var is that thing. This is keeping a Promise in every
  iteration that resolves when all the previous promises resolve
  sequentially. Since we don't have a Promise in the array
  previous to the first one, we fabricate one out of 'thin air'
  with Promise.resolve() */
  promiseFactories.forEach(function (promiseFactory) {
    result = result.then(promiseFactory); /* Here result is update
    with a new Promise, with is the result of  chaining `result`
    with the current one. Since `result` already had all the previous ones,
    at the end, `result` will be a Promise that depends upon all the
    Promises resolution.*/
  });
return result;
}

现在，还有一个语法怪癖可能令你困惑：

result = result.then(promiseFactory);

这一行几乎与以下内容相同：

result = result.then(resolvedValue => promiseFactory(resolvedValue));

如果有人可以帮助我理解如何在空承诺的'then'方法中调用promiseFactory方法使它按顺序执行，就像这样。 或者是因为forEach循环？

首先， promiseFactory在那里是一个非常糟糕的名字。 该方法应更好地编写如下：

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

所以：

如何在空承诺的'then'方法中调用currentPromise方法使其顺序执行？

它使因为当你通过附加承诺到另一个是顺序执行的then ，它依次执行。 是then的事情，它是不是在所有相关的事实，我们遍历承诺。 在迭代之外的普通Promise，它的工作方式几乎相同：

Promise.resolve() // fake Promises that resolves instanly
.then(fetchUsersFromDatabase) // a function that returns a Promise and takes
// like 1 second. It won't be called until the first one resolves
.then(processUsersData) // another function that takes input from the first, and
// do a lot of complex and asynchronous computations with data from the previous promise.
// it won't be called until `fetchUsersFromDatabase()` resolves, that's what
// `then()` does.
.then(sendDataToClient); // another function that will never be called until
// `processUsersData()` resolves

Answer 4

如果我们布置foreach循环，它将如下所示

 function doFirstThing(){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log(1); resolve(1); },1000) }) } function doSecondThing(res){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log(2); resolve(res + 1); },2000) }) } function doThirdThing(res){ return new Promise(function(resolve,reject){ setTimeout(()=>{ console.log(3); resolve(res + 2); },3000) }) } Promise.resolve() .then(doFirstThing()) .then(doSecondThing()) .then(doThirdThing()); 

我确实理解，promises会在创建后立即执行。 由于某种原因，我无法理解执行的流程。 特别是以下行： var result = Promise.resolve()//and empty promise is created.

这只是为了掌握承诺链的起点。 这是一个已经解决的承诺。 为了更好地理解它，您可以使用您的一个承诺来获得承诺链，如下所示。

let promiseFactories= [doSecondThing, doThirdThing];

let result = doFirstThing();

promiseFactories.forEach(function (promiseFactory) {
     result = result.then(promiseFactory);
});

这也行。