Promise.all, Promise.race 以及ES2020 新特性 Promise.allSettled

2021-11-30 23:31:39 阅读：183 来源： 互联网

标签：resolve console ES2020 race Promise reject allSettled

更多文章详见公众号【前端css和js干货】

Promise是Es6最令人兴奋的特性，在那之前人们可能会通过第三方库如Bluebird或Q使用过promise，但是直到2015年才成为js的标准特性。
Promise 对象代表一个异步操作的完成(或失败)以及他的结果值。
Promise 会做一些可能需要一些时间的事情，但最终它会在一切顺利时resolve，或者如果出现问题则reject。然后使用.then 和 .catch分别对result或error做一些事情。

const promise = new Promise(function(resolve, reject) {
  setTimeout(() => {
      if (Math.random(1) > 0.5) {
        resolve('Some value');
      } else {
        reject('Some error');
      }
  }, 500);
});

promise.then((response) => {
  console.log(response);
}).catch(err => {
  console.log(err);
});

ES2020 带来了一个新特性：Promise.allSettled。弥补了 ES6 Promise.all 和 Promise.race留下的缺陷。

promises数组

我们经常不仅要处理一个 Promise，还要处理一系列的 Promise。如果一次发送许多服务器请求，可能就是这种情况。

例如，我创建了一个包含五个 Promise 的数组。在一段时间（100 毫秒、200 毫秒、……、500 毫秒）后，它们以 50% 的概率rsolve或rejected。

const arrayOfPromises = [];
const arrayOfResponses = [];

for (let i = 0 ; i < 5; i += 1) {
    arrayOfPromises.push(new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random(1) > 0.5) {
          resolve('Some value');
        } else {
          reject('Some error');
        }
    }, i * 100);
  }));
}
arrayOfPromises.forEach((promise) => {
    promise.then((response) => {
        arrayOfResponses.push(response);
    }).catch((err) => {
        arrayOfResponses.push(err); 
    });
});

我们可以手动处理这个 Promise 数组，在示例中将结果存储在arrayOfResponses数组中。如果半秒后在控制台中显示数组，将看到如下内容：

但是我们经常想在所有 Promises resolve了或者一旦其中一个settles了之后做一些事情。这有点棘手，这就是Promise.all和Promise.race存在的原因。

Promise.race

Promise.race 以一组 Promise 为参数并返回一个 Promise。该 Promise 将在数组的Promise 其中之一resolve或reject后立即resolve。

const promiseRace = Promise.race(arrayOfPromises);
promiseRace.then(() => console.log('One resolved'))
            .catch(() => console.log('One rejected'));

Promise.all

Promise.all会在promise数组的每个元素都resolve了之后resolve。

const promiseRace = Promise.race(arrayOfPromises);
promiseRace.then(() => console.log('One resolved'))
            .catch(() => console.log('One rejected'));

但是，如果只要数组中的一个 Promise 发生reject，Promise.all 也会reject。

ES2020 Promise.allSettled

您可能希望在所有 Promise settled后立即执行某些操作，无论它们是否已resolve或reject。这就是 Promise.allSettled 的用途。

const promiseAllSettled = Promise.allSettled(arrayOfPromises)
promiseAllSettled.then(response => console.log(response));

Promise.allSettled 将在所有 Promise resolve或reject时resolve。返回值是一个对象数组，带有状态（rejected 或 fulfilled）和值（或错误）。

总结

Promise.all 将在一个 Promise reject后立即reject，而 Promise.race 将在一个 Promise resolve后立即resolve，而 Promise.allSettled 将始终resolve，并且只在每个 Promise 都settled后才resolve。

Promise.allSettled 是 ES2020 的一项特性，已在 Node v.12.9.0、Google Chrome 76、Safari 13 和 Firefox 71 中得到支持。

作者：Heloise Parein 译者：前端css和js干货来源：gitconnected

标签：resolve,console,ES2020,race,Promise,reject,allSettled
来源： https://www.cnblogs.com/qdhm/p/15627010.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Promise.all, Promise.race 以及ES2020 新特性 Promise.allSettled

promises数组

Promise.race

Promise.all

ES2020 Promise.allSettled

总结