Promise常用方法及区别

一、实例方法

let _fun = new Promise((resolve, reject) => {
  reject("失败！");
});
/*
resolve：异步操作成功时调用的回调函数。
reject：异步操作失败时调用的回调函数。
*/
_fun.then(res => { // 成功
  console.log('res: ', res);
}).catch(err => { // 失败
  console.log('err: ', err);
}).finally(result => { // 无论成功失败都会走这个方法，接收到的参数为undefined
  console.log('finally: ', result);
})
/* 执行结果
err:  失败！
finally:  undefined
*/

二、静态方法

// 注：此处统一定义几个下方会用到的异步操作。
let _fun1 = new Promise((resolve) => {
  setTimeout(() => resolve("成功1！"));
});
let _fun2 = Promise.resolve("成功2！");
let _fun3 = new Promise((resolve, reject) => {
  setTimeout(() => reject("失败1！"));
});
let _fun4 = Promise.reject("失败2！");
let _fun5 = new Promise((resolve, reject) => {
  reject("失败3！");
});

1、Promse.all ：所有异步都成功才会走.then方法，执行结果与参数的顺序保持一致，与执行时间快慢无关；
若有执行失败的则走.catch方法，并返回最先执行完失败的异步结果。

Promise.all([_fun1, _fun2, _fun3, _fun4, _fun5])
 .then((res) => console.log("all_res_01: ", res))
 .catch((err) => console.log("all_err_01: ", err));
Promise.all([_fun1, _fun2])
 .then((res) => console.log("all_res_02: ", res))
 .catch((err) => console.log("all_err_02: ", err));
/* 执行结果
all_err_01:  失败2！
all_res_02: ['成功1！', '成功2！']
*/

2、Promise.race ：最新执行完的若是成功则会走.then方法，若是失败则会走.catch方法，两种情况都返回当前结果。

Promise.race([_fun1, _fun2, _fun3, _fun4, _fun5])
  .then((res) => console.log("race_res_01: ", res))
  .catch((err) => console.log("race_err_01: ", err));
Promise.race([_fun3, _fun4, _fun5, _fun2])
  .then((res) => console.log("race_res_02: ", res))
  .catch((err) => console.log("race_err_02: ", err));
/* 执行结果
race_res_01:  成功2！
race_err_02:  失败2！
*/

3、Promise.any ：若有成功则走.then方法，并返回第一个成功的结果；若全部失败则走.catch并返回“AggregateError: All promises were rejected”。

Promise.any([_fun4, _fun1, _fun2, _fun3, _fun5])
  .then((res) => console.log("any_res_01: ", res))
  .catch((err) => console.log("any_err_01: ", err));
Promise.any([_fun3, _fun4, _fun5])
  .then((res) => console.log("any_res_02: ", res))
  .catch((err) => console.log("any_err_02: ", err));
/* 执行结果
any_res_01:  成功2！
any_err_02:  AggregateError: All promises were rejected
*/

4、Promise.allSettled ：所有的请求都执行完走.then方法，返回结果按参数顺序返回在一个数组中，每项会包含当前执行的状态（rejected失败、fulfilled成功）。

Promise.allSettled([_fun4, _fun1, _fun2, _fun3, _fun5])
  .then((res) => console.log("allSettled_res_01: ", res))
  .catch((err) => console.log("allSettled_err_01: ", err));
/* 执行结果
allSettled_res_01: 
[
{status: 'rejected', reason: '失败2！'},
{status: 'fulfilled', value: '成功1！'},
{status: 'fulfilled', value: '成功2！'},
{status: 'rejected', reason: '失败1！'},
{status: 'rejected', reason: '失败3！'}
]
*/