Promise.allSettled & Promise.all & Promise.race & Promise.any All In One

Promise.allSettled & Promise.all & Promise.race & Promise.any All In One

new Promise(), Promise.resolve(), Promise.reject(),

Promise.prototype.catch()

Promise.prototype.finally()

Promise.prototype.then()

Promise

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

要么全部 promise 结果都成功了，返回全部的 promise 构成的一个结果值的数组；

要么只要有一个 promise 失败了，就返回失败了的 promise 的 error 值，默认 undefined

一句话总结: 全部 promise 结果都成功了，返回一个有所有成功的结果值的数组; 只要有一个promise 失败了，就的返回失败结果;

// declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;

const log = console.log;

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 0, 'foo');
});
const promise4 = Promise.reject(`error message`);

Promise
  .all([promise1, promise2, promise3, promise4])
  .then(values => {
   console.log(values);
}, err => {
   console.log(` promise error =`, err);
});
//  promise error = error message 

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// [ 3, 42, 'foo']

const promiseFunction = async () => {
  const resolvingPromise = new Promise(resolve => setTimeout(() => resolve('success'), 1000));
  const rejectingPromise = new Promise((resolve, reject) => setTimeout(() => reject('fail'), 500));
  try {
    const allPromises = await Promise.all([resolvingPromise, rejectingPromise]);
  } catch (e) {
  	// e is 'fail', which is  the contents of the reject function from rejectingPromise
    // resolvingPromise =  Promise {<pending>}
    console.log(e);
  }
};
promiseFunction();

Promise.allSettled

返回全部的 promise 的结果，无论 promise 结果是成功还是失败，构成一个可迭代的数组对象

成功的 promise 返回一个有 status: 'fulfilled' 和 value 构成的对象

失败的 promise 返回一个有 status: 'rejected' 和 reason 构成的对象

一句话总结: 无论 promise 是成功了还是失败了, 最终都返回一个有 status 和 value 或 reason 构成的对象数组;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

const log = console.log;

const promise1 = Promise.resolve(1);
// const promise2 = new Promise((resolve, reject) => setTimeout(reject, 0, ' Error'));
// const promise3 = new Promise((resolve, reject) =>  setTimeout(resolve, 0, ' OK'));

const promise2 = Promise.reject(' Error');
const promise3 =Promise.resolve(' OK');

const promises = [promise1, promise2, promise3];

Promise.allSettled(promises). then(
  (results) => results.forEach(result => log(`result`, result.status, result))
);

/*

result fulfilled {status: "fulfilled", value: 1}
result rejected {status: "rejected", reason: " Error"}
result fulfilled {status: "fulfilled", value: " OK"}

Promise {<fulfilled>: undefined}

*/

// [
//   { status: 'fulfilled', value: 3 },
//   { status: 'fulfilled', value: 42 },
//   { status: 'fulfilled', value: 'foo' },
//   { status: 'rejected', reason: ' error message' }
// ]

// declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;

const log = console.log;

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 0, 'foo');
});
const promise4 = Promise.reject(` error message`);

Promise
  .allSettled([promise1, promise2, promise3, promise4])
  .then(values => {
   console.log(values);
}, err => {
   console.log(`promise error =`, err);
});
// [
//   { status: 'fulfilled', value: 3 },
//   { status: 'fulfilled', value: 42 },
//   { status: 'fulfilled', value: 'foo' },
//   { status: 'rejected', reason: ' error message' }
// ]

Promise.allSettled([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// [
//   { status: 'fulfilled', value: 3 },
//   { status: 'fulfilled', value: 42 },
//   { status: 'fulfilled', value: 'foo' }
// ]

const promiseFunction = async () => {
  const resolvingPromise = new Promise(resolve => setTimeout(() => resolve('success'), 1000));
  const rejectingPromise = new Promise((resolve, reject) => setTimeout(() => reject('fail'), 500));
  try {
    const allPromises = await Promise.allSettled([resolvingPromise, rejectingPromise]);
    console.log(allPromises);
    // allPromises
    // [
    //   {status: "fulfilled", value: 'success'},
    //   {status: "rejected",  reason: 'fail'}
    // ]
  } catch (e) {
    // this code block is never executed
    console.log(e);
  }
};
promiseFunction();

Promise.race

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

返回第一个完成的 promise， 不论 promise 是成功了，还是失败了; 强调的是第一个完成的 promise

一句话总结: 无论 promise 是成功了还是失败了, 返回第一个完成的 promise;

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 0, 'three ');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  //  promise2 is faster
});
// "two"

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value);
}, (error) => {
  console.log(`error =`, error);
  // reject, promise3 is fastest
});
// "error =" "three "

```

```js
const promiseFunction = async () => {
  const resolvingPromise = new Promise(resolve => setTimeout(() => resolve('success'), 1000));
  const resolvingPromiseTwo = new Promise((resolve, reject) => setTimeout(() => resolve('successTwo'), 500));
  try {
    const racedPromises = await Promise.race([resolvingPromise, resolvingPromiseTwo]);
    console.log(racedPromises);
    // both promises would've resolved, but resolvingPromiseTwo was faster, so racedPromises = 'successTwo'`
  } catch (e) {
    // this code block is only executed if the first promise to settle rejects/throws
    console.log(e);
  }
};
promiseFunction();

```

## Promise.any

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any

如果有多个 promise 成功了，就返回最快的哪一个 promise 的值, 不管是否存在 reject 的 promise ;
如果所有的 promise 都失败了，就返回一个 聚合错误 AggregateError，Error 的新子类;

一句话总结: 如果存在成功的 promise，就返回最快的哪一个 promise 的值；如果所有的 promise 都失败了, 就返回一个聚合错误;

```js

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 200, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));
// "quick"

const promise11 = Promise.reject(0);
const promise22 = new Promise((resolve, reject) => setTimeout(reject, 100, 'quick'));
const promise33 = new Promise((resolve, reject) => setTimeout(reject, 200, 'slow'));
const promise44 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'very slow'));

const promises2 = [promise11, promise22, promise33];
// const promises2 = [promise11, promise22, promise33, promise44];

Promise.any(promises2).then((value) => console.log(value), (error) => console.log(`error =`, error));
// "error =" AggregateError: All promises were rejected
// "very slow"
```

> AggregateError 聚合错误

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AggregateError

## refs

https://www.yuque.com/sunluyong/interview/ars1bd

https://blog.jonlu.ca/posts/promises

***

<div>
<a href="https://info.flagcounter.com/QIXi"><img src="https://s11.flagcounter.com/count2/QIXi/bg_000000/txt_00FF00/border_FF00FF/columns_3/maxflags_12/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
</div>

***

<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none;">
<h3><strong><span style="font-size: 16pt; color: #00ff00;">&copyxgqfrms 2012-<span data-uid="copyright-aside">2020</span></strong></span</h3>
<p><span style="font-size: 18pt; color: #00ff00;"><strong>www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
</blockquote>

***