概述
- 阐述promsie的基本概念
- 介绍实例方法then、catch、finally
- 介绍静态方法all、allSettled、race、any、resolve、reject
一、基础概念
-
执行器
executor
◐ 当通过new创建Promise对象时,需要传入一个回调函数,称之为executor
◐executor
会在new promise时会被立即执行,并且可传入另外两个回调函数resolve
、reject
◐ 当调用resolve回调函数时,会执行Promise对象的then方法传入的回调函数
◐ 当调用reject回调函数时,会执行Promise对象的catch方法传入的回调函数 -
一个 Promise 必然处于以下几种状态之一
◐ 待定(pending
):初始状态,既没有被兑现,也没有被拒绝
◐ 已兑现(fulfilled
):意味着操作成功完成
◐ 已拒绝(rejected
):意味着操作失败
如果一个 Promise 已经被兑现或拒绝,即不再处于待定状态,那么则称之为已敲定(settled
),且此时该Promise的状态是不可更改的 -
使用setTimeout模拟异步返回结果
// 调用resolve触发fulfilled // 打印结果 22 11 'fulfilled' new Promise((resolve, reject) => { setTimeout(() => { resolve(11); console.log(22); }, 500); }) .then((res) => console.log(res, "fulfilled")) .catch((err) => console.log(err, "rejected")); // 调用reject触发rejected // 打印结果 error rejected new Promise((resolve, reject) => { setTimeout(() => { reject('error'); }, 500); }) .then((res) => console.log(res, "fulfilled")) .catch((err) => console.log(err, "rejected"));
二、实例方法then、catch、finally
-
then
方法
◐ 入参.then(fulfilled回调, rejected回调)
new Promise((resolve, reject) => {}).then( (res) => { console.log(res); }, (err) => { console.log(err); } ) // 以上代码等同于 new Promise((resolve, reject) => {}) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); });
◐ 返回值
promise
的状态
a. 回调函数本身在执行时,处于pending状态
b. 返回一个结果时,处于fulfilled状态,且返回的值将作为参数继续传递
注:返回结果是一个Promise时,新Promise的状态会决定then返回Promise的状态
c. 抛出一个异常时,它处于rejected状态例子一:
new Promise((resolve, reject) => { resolve(11); }) .then((res) => { console.log(res); // 11 return 22; }) .then((res) => { console.log(res); // 22 return Promise.resolve(33); }) .then((res) => { console.log(res); // 33 }) // 没有返回任何值:将以 undefined 作为其兑现值 .then((res) => { console.log(res); // undefined });
例子二:
new Promise((resolve, reject) => { resolve(11); }) .then((res) => { console.log(res); // 11 return 22; }) .then((res) => { console.log(res); // 22 throw new Error("错误"); }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); // 错误对象 });
-
catch
方法
◐ 入参.catch(rejected回调)
new Promise((reslve, reject) => { reject("error"); }).catch((err) => { console.log(err); });
◐ 返回值
promise
的状态*同then一致*
例子一:
// .catch链式接收时仅能获取到上一次reject的值 new Promise((reslve, reject) => { reject("error"); }) .catch((err) => { console.log(err); // error return Promise.reject(11); }) .catch((res) => { console.log(res); // 11 }) .catch((res) => { console.log(res); });
例子二:
new Promise((reslve, reject) => { reject("error"); }) .catch((err) => { console.log(1, err); // 1 'error' return Promise.reject(11); }) .catch((err) => { console.log(2, err); // 2 11 return 22; }) .catch((err) => { console.log(3, err); }) .then((res) => { console.log(4, res); // 4 22 }) .catch((err) => { console.log(5, err); }) .then((res) => { console.log(6, res); // 6 undefined });
-
finally
方法
◐ 入参.finally(回调)
注:Promise对象无论变成fulfilled还是reject状态,最终都会被执行的代码
new Promise((resolve, reject) => { resolve(11); }) .finally(() => { console.log('finally11'); })
◐ 返回值
promise
注:返回等效的 Promise。如果处理程序抛出错误或返回被拒绝的 promise,那么 finally() 返回的 promise 将以该值被拒绝。否则,处理程序的返回值不会影响原始 promise 的状态
new Promise((resolve, reject) => { resolve(11); }) .finally(() => { console.log("finally11"); // finally11 }) .finally(() => { console.log("finally22"); // finally22 }) .then((res) => { console.log(res); // 11 });
三、静态方法all、allSettled、race、any、resolve、reject
-
all
方法
a. 将多个promise包裹在一起形成一个新的Promise
b. 新的promise状态由所有promise共同决定-
所有的promise状态变成fulfilled时,新的promise状态为fulfilled,并且会将所有promise的返回值组成一个数组
const p1 = new Promise((resolve, reject) => resolve(11)); const p2 = new Promise((resolve, reject) => resolve()); const p3 = new Promise((resolve, reject) => resolve(33)); Promise.all([p1, p2, p3]).then((res) => console.log(res)); // [11, undefined, 33]
-
当有一个promise状态为rejected时,新的promise状态为rejected,并且会将第一个rejected的返回值作为参数
const p1 = new Promise((resolve, reject) => resolve(11)); const p2 = new Promise((resolve, reject) => reject("错误1")); const p3 = new Promise((resolve, reject) => reject("错误2")); Promise.all([p1, p2, p3]) .then((res) => console.log(res)) .catch((err) => console.log("error", err)); // error 错误1
-
-
allSettled
方法
a. 该方法会在所有的promise都有结果(settled)(fulfilled、rejected)时,会触发最终调用;
b. 新promise的结果一定是fulfilled的;
c. 与all相比较- 如何触发新promise最终状态为fulfilled,
all
在所有promise结果为fulfilled时触发,allSettled
在所有的promise结果为fulfilled、rejected时触发 all
新promise状态有fulfilled、rejected,allSettled
的新promise**状态只有fulfilled- 当新promise状态为fulfilled时,
all
为一个存储所有promise返回值的数组([11, 22, 33]),allSettled
为一个存储所有promise返回值包装成对象的数组([{status: ‘fulfilled’, value: 11},{status: ‘fulfilled’, value: undefined, {status: ‘fulfilled’, value: 22}}])
- 如何触发新promise最终状态为fulfilled,
const p1 = new Promise((resolve, reject) => resolve(11));
const p2 = new Promise((resolve, reject) => reject("错误1"));
const p3 = new Promise((resolve, reject) => resolve(22));
Promise.allSettled([p1, p2, p3])
.then((res) => console.log(res));
======打印结果见下
[
{
status: "fulfilled",
value: 11,
},
{
status: "rejected",
reason: "错误1",
},
{
status: "fulfilled",
value: 22,
},
]
-
race、any
方法-
race 传入promise可迭代对象,返回一个promise。
一旦有一个 promise状态已敲定(fulfilled、rejected
),它就会立即返回。function sleep(time, value, state) { return new Promise((resolve, reject) => { setTimeout(() => { if (state === "兑现") { return resolve(value); } else { return reject(new Error(value)); } }, time); }); } const p1 = sleep(500, 11, "兑现"); const p2 = sleep(100, 22, "兑现"); // 返回首个已兑现的p2 Promise.race([p1, p2]) .then((res) => console.log(res)) // 22 .catch((err) => console.log("error", err));
const p3 = sleep(500, 11, "兑现"); const p4 = sleep(100, 22, "拒绝"); // 返回首个已拒绝的p4 Promise.race([p3, p4]) .then((res) => console.log(res)) .catch((err) => console.log("error", err)); // error Error: 22 // 传入空 - 则返回的promise永远处于pending状态,不会有输出 Promise.race([]) .then((res) => console.log(res)) .catch((err) => console.log("error", err));
-
any 传入promise可迭代对象,返回一个promise。
一旦有一个 promise状态已兑现(fulfilled
),它就会立即返回。
所有promise状态已拒绝(rejected
),将使用AggregateError进行拒绝// 返回首个已兑现 const p1 = new Promise((resolve, reject) => reject("错误1")); const p2 = new Promise((resolve, reject) => resolve(11)); const p3 = new Promise((resolve, reject) => resolve(22)); Promise.any([p1, p2, p3]) .then((res) => console.log(res)) // 11 .catch((err) => console.log("error", err));
// 全未兑现 const p1 = new Promise((resolve, reject) => reject("错误1")); const p2 = new Promise((resolve, reject) => reject("错误2")); const p3 = new Promise((resolve, reject) => reject("错误3")); Promise.any([p1, p2, p3]) .then((res) => console.log(res)) .catch((err) => console.log("error", err)); // error AggregateError: All promises were rejected // 传入空 Promise.any([]) .then((res) => console.log(res)) .catch((err) => console.log("error", err)); // error AggregateError: All promises were rejected
-
-
resolve、reject
方法
a. 直接调用静态方法resolve将promise状态更改为已兑现(fulfilled
)
Promise.resolve(1) 等同于 new Promise((resolve)=>resolve(1))new Promise((resolve)=>resolve(11)).then((res) => console.log(res)) // 11 Promise.resolve(22).then((res) => console.log(res)) // 22
b. 直接调用静态方法reject将promise状态更改为已拒绝(
rejected
)
Promise.reject(1) === new Promise((resolve, reject)=>reject(1))new Promise((resolve,reject)=>reject('error')).catch((err) => console.log(err)) // error Promise.reject('error').catch((err) => console.log(err)) // error