Promise.all（）未按預期順序解決承諾

Question

如果我正確理解Promise.all（），我希望這段代碼將花費5秒鍾，然后才將拒絕承諾的原因輸出到控制台。

function firstAsyncFunction() {
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve(console.log('First async function has been resolved!'));
    }, 500);
  });    
}

function secondAsyncFunction() {
  return new Promise(function(resolve, reject) {
    setTimeout(function(){
      resolve(console.log('Second async function has been resolved!'));
    }, 2000);
  });
}

function thirdAsyncFunction() {
  return new Promise(function(resolve, reject) {      
    setTimeout(function() {              
      reject('Internal server error'); // rejected for some reason
    }, 5000);    
  });
};

Promise.all([secondAsyncFunction(), firstAsyncFunction(), thirdAsyncFunction()])
    .then(function(values){        
      values.forEach(function(value){
        console.log(value);
      });

    }).catch(function(err){
      console.log(err);
    });

相反，前兩個承諾會解決， 然后最后的承諾會被拒絕。 此外，前兩個承諾甚至沒有按照它們傳遞給Promise.all（）的順序進行解析。 我是否需要以不同的方式履行諾言才能看到我期望的行為？

編輯

Promise.all（）確實確實要等到傳遞給它的可迭代對象中的所有promise都解決為止。 我的第一個線索是控制台輸出未定義的事實（感謝Jaromanda X）。 如果我刪除對firstAsyncFunction（）和secondAsyncFunction（）的解析中對console.log（）的調用，則下面的代碼將完全按照我的預期工作：

function firstAsyncFunction() {
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve('First async function has been resolved!');
    }, 1000);
  });    
}

function secondAsyncFunction() {
  return new Promise(function(resolve, reject) {
    resolve('Second async function has been resolved!');      
  });
}

function thirdAsyncFunction() {
  return new Promise(function(resolve, reject) {      
    setTimeout(function() {      
      reject('Internal server error');
    }, 5000);
  });
};

Promise.all([
  thirdAsyncFunction(), 
  firstAsyncFunction(), 
  secondAsyncFunction()
])
 .then(function(values){        
   values.forEach(function(value){
     console.log(value);
   });
 })
 .catch(function(err){
   console.log(err);
 });

五秒鍾后，我僅看到“內部服務器錯誤”。 Promise.all（）拒絕其他承諾，即使它們比被拒絕的承諾更早解決。 是的，由Promise.all（）解析的值將與作為參數傳入的iterable中的promise的順序相同。 感謝你的幫助！

再舉一個例子：

function firstAsyncFunction() {
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve('First async function has been resolved!');
    }, 1000);
  });    
}

function secondAsyncFunction() {
  return new Promise(function(resolve, reject) {
    resolve('Second async function has been resolved!');      
  });
}

function thirdAsyncFunction() {
  return new Promise(function(resolve, reject) {      
    setTimeout(function() {
      resolve({
        users: [
          { name: 'Ronnie', age: 22 },
          { name: 'Bobby', age: 21 },
          { name: 'Ricky', age: 21 },
          { name: 'Mike', age: 20 }
        ]
      });
    }, 5000);
  });
};

Promise.all([thirdAsyncFunction(), firstAsyncFunction(), secondAsyncFunction()])
  .then(function(values){        
    values.forEach(function(value){
      console.log(value);
    });
  })
  .catch(function(err){
    console.log(err);
  });

五秒鍾后，此代碼將輸出：

{ users: 
   [ { name: 'Ronnie', age: 22 },
     { name: 'Bobby', age: 21 },
     { name: 'Ricky', age: 21 },
     { name: 'Mike', age: 20 } ] }
First async function has been resolved!
Second async function has been resolved!

正是我們想要的。

Answer 1

Promise.all的then或catch函數僅在所有承諾均已解決或其中一個承諾被拒絕后才被調用。 各個承諾可以按任何順序解決（這就是承諾的全部內容-它們是異步的，可以根據需要完成它們應做的工作）

話雖如此，如果您將Promise.all console.log標記為不同，這樣會更清楚

Promise.all([secondAsyncFunction(), firstAsyncFunction(), thirdAsyncFunction()])
    .then(function (values) {
        values.forEach(function (value) {
            console.log('then:' + value);
        });

    }).catch(function (err) {
        console.log(err);
    });

您可能會在promise中混入console.logs， then在then回調中混入console.logs。

Answer 2

Promise.all不會對諾言施加任何順序，它們會在履行時履行

第三個承諾在其他兩個“解決”之后“拒絕”，因此可以預料到前兩個在最后一個被拒絕之前已解決

順便說一句，您的前兩個承諾是解決undefined的值並輸出到控制台-這就是為什么您可能認為Promise.all正在做它不應該做的事情

我是否需要以不同的方式履行諾言才能看到我期望的行為？

您不會完全得到您期望的行為，因為您希望諾言按特定順序解決，因此唯一可能發生的方式是諾言等待上一個諾言兌現，然后再兌現。是累積的，而不是並行的，因此在這種情況下，您不會在7.5秒內獲得拒絕，而不是您“預期”的5秒

Answer 3

只是為了補充別人所說的話。

Promise.all沒有按順序運行。

這是在ES6中順序運行異步功能的示例

/**
 * Runs async functions sequentially
 * @param Function[]
 * @return Promise<any>
 */
function runSequentially(functions) {
    return functions.reduce((promise, next) => {
        return promise.then(next);
    }, Promise.resolve());
}


/**
 * Full Example
 */

function foo()
{
    return new Promise(( resolve, reject )=>{
        resolve();
    })
}

function boo() {
    return new Promise((resolve, reject) => {
        resolve();
    })
}

function baz() {
    return new Promise((resolve, reject) => {
        resolve();
    })
}

const functions = [foo, boo, baz];

runSequentially(functions).then((result) => {

}).catch((error) => {

});

Answer 4

Promise.all運行您傳遞的所有Promise.all 。 當“承諾”彼此不依賴並且您需要同時執行兩者時，這很有用。 例如，在集成測試中，您需要向服務器注冊兩個客戶端。 您需要等待兩者都完成，但是同時啟動兩者將使等待時間減少大約一半。

如果要順序運行它們，則可以鏈接Promises，將結果從一個返回到下一個：

firstAsyncFunction
  .then(secondAsyncFunction)
  .then(thirdAsyncFunction)
  .then(function(values) {
    console.log(values)
  }, function(err) {
    console.log(err);
  });

如果您希望從所有三個調用中返回匯總數據，則還需要修改您的Promise以在數組（或對象）中返回其值。 例如：

• firstAsyncFunction使用userId並返回{ name: 'Bob' }
• secondAsyncFunction接受userObject並返回{ name: 'Bob', car: 'Porsche' }
• thirdAsyncFunction接受userObject並返回{ name: 'Bob', car: 'Porsche', kids: 5 }