当前位置: 代码迷 >> JavaScript >> Promise.all()未按预期顺序解决承诺
  详细解决方案

Promise.all()未按预期顺序解决承诺

热度:99   发布时间:2023-06-07 13:45:48.0

如果我正确理解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!

正是我们想要的。

Promise.all的thencatch函数仅在所有承诺均已解决或其中一个承诺被拒绝后才被调用。 各个承诺可以按任何顺序解决(这就是承诺的全部内容-它们是异步的,可以根据需要完成它们应做的工作)

话虽如此,如果您将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, thenthen回调中混入console.logs。

Promise.all不会对诺言施加任何顺序,它们会在履行时履行

第三个承诺在其他两个“解决”之后“拒绝”,因此可以预料到前两个在最后一个被拒绝之前已解决

顺便说一句,您的前两个承诺是解决undefined的值并输出到控制台-这就是为什么您可能认为Promise.all正在做它不应该做的事情

我是否需要以不同的方式履行诺言才能看到我期望的行为?

您不会完全得到您期望的行为,因为您希望诺言按特定顺序解决,因此唯一可能发生的方式是诺言等待上一个诺言兑现,然后再兑现。是累积的,而不是并行的,因此在这种情况下,您不会在7.5秒内获得拒绝,而不是您“预期”的5秒

只是为了补充别人所说的话。

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) => {

});

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 }
  相关解决方案