目录
Promise基本
引入Pomise
Promise
是 JavaScript
引入的一种处理异步操作的机制,它代表一个异步操作的最终完成(或失败)及其结果值,它旨在解决异步编程中常见的问题,引入 Promise
的主要原因包括:
- 为了解决回调地狱
在传统的回调函数(callback
)方式中,多个异步操作的回调函数嵌套在一起,形成了所谓的回调地狱或回调金字塔,使得代码变得难以阅读和维护doSomething(function (result) { doSomethingElse(result, function (newResult) { doAnotherThing(newResult, function (finalResult) { console.log(finalResult); }); }); });
- 为了有更好的错误提示:使用回调函数时,错误处理往往不够直观,尤其是当异步操作链很长时
doSomething(function (result) { doSomethingElse(result, function (newResult) { doAnotherThing(newResult, function (finalResult) { console.log(finalResult); }, function (error) { console.error(error); }); }, function (error) { console.error(error); }); }, function (error) { console.error(error); });
- 为了方便使用和规范
-
第一:我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等;
-
第二:对于不同的人、不同的框架设计出来的方案是不同的,那么我们必须耐心去看别人的源码或者文档,以便可以理解这个函数到底怎么用
-
代码结构
-
Promise
是一个类,可以翻译成 承诺、许诺 、契约 -
当我们需要给予调用者一个承诺,待会儿我会给你回调数据时,就可以创建一个
Promise
的对象 -
在通过
new
创建Promise
对象 时,我们需要传入一个回调函数-
这个回调函数会被立即执行,有两个参数为回调函数
resolve
、reject
-
当我们调用
resolve
回调函数时,会执行实例的then
方法传入的回调函数 -
当我们调用
reject
回调函数时,会执行实例的catch
方法传入的回调函数 -
可链式调用
then
和catch
-
-
代码示例如下:
const promise = new Promise((resolve, reject) => { console.log("这个函数会立即执行"); resolve("成功"); // 会执行then // reject("失败"); // 会执行catch }); // promise.then((res) => { // console.log(res); // 成功 // }); // promise.catch((err) => { // console.log(err); // 失败 // }); promise .then((res) => { console.log(res); // 成功 }) .catch((err) => { console.log(err); // 失败 });
三个状态
- 待定(
pending
): 初始状态,既没有被兑现也没有被拒绝,当执行executor
中的代码时,处于该状态 - 已兑现(
fulfilled
): 意味着操作成功,执行了resolve
时处于该状态 - 已拒绝(
rejected
): 意味着操作失败,执行了reject
时处于该状态
注意:一旦状态被确定下来,Promise
的状态会被锁死,该Promise
的状态是不可更改的
const promise = new Promise((resolve, reject) => {
console.log("这个函数会立即执行");
resolve("成功");
reject("失败"); // promise的状态已经确定resolve,不会执行reject
});
promise
.then((res) => {
console.log(res); // 成功
})
.catch((err) => {
console.log(err); // catch不会执行
});
Executor
Executor
是在创建Promise
时需要传入的一个回调函数,这个回调函数会被立即执行,并且传入两个参数resolve
和reject
,会在Executor
中确定Promise
状态:
- 通过
resolve
,可以兑现(fulfilled
)Promise
的状态,我们也可以称之为已决议(resolved
) - 通过
reject
,可以拒绝(reject
)Promise
的状态
resolve传不同值
-
如果
resolve
传入一个普通的值或者没有实现then
方法的对象,那么这个值会作为then
回调的参数const promise = new Promise((resolve, reject) => { console.log("这个函数会立即执行"); resolve("成功"); // resolve(123); // resolve({ name: "obj" }); }); promise.then((res) => { console.log(res); // 打印:成功 || 123 || { name: "obj" } });
-
当的
resolve
方法中传入的值是一个对象并且该对象实现了then
方法时,Promise
会将这个对象视为一个thenable
对象(一个具有then
方法的对象),会根据这个对象中then
方法的执行结果来决定最终的Promise
状态。这种行为被称为 “Promise A+
规范” 中的 “Promise Resolution Procedure
”-
当
Promise.resolve
遇到一个thenable
对象时,它会自动调用这个对象的then
方法,并且将内部生成的resolve
和reject
函数传递进去 -
在
thenable
对象的then
方法中,resolve
和reject
这两个参数是回调函数,它们由Promise
内部机制提供用来处理异步操作的成功或失败,相当于Promise
本身的resolve
和reject
方法,能够决定当前Promise
的最终状态 -
当在
thenable
对象的then
方法中使用resolve(传不同值)
时,和外面的三种情况一致 -
如果
thenable
对象的then
方法抛出异常,Promise
会将捕获异常作为最终结果,状态为rejected
const promise1 = new Promise((resolve, reject) => { console.log("这个promise1Log会立即执行"); // 这个promise1Log会立即执行 resolve({ name: "thenable1", then(resolve, reject) { resolve("thenable1成功"); }, }); }); promise1.then((res) => { console.log(res); // thenable1成功 }); const promise2 = new Promise((resolve, reject) => { console.log("这个promise2Log会立即执行"); // 这个promise2Log会立即执行 resolve({ name: "thenable2", then(resolve, reject) { reject("thenable2失败"); }, }); }); promise2 .then((res) => { console.log(res); }) .catch((err) => { console.log(err); // thenable2失败 }); const promise3 = new Promise((resolve, reject) => { console.log("这个promise3Log会立即执行"); // 这个promise3Log会立即执行 resolve({ name: "thenable3", then() { console.log("thenable3Log"); // 会执行打印:thenable3Log }, }); }); promise3 // then和catch都不会执行 .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); const promise4 = new Promise((resolve, reject) => { console.log("这个promise4Log会立即执行"); // 这个promise4Log会立即执行 resolve({ name: "thenable4", then() { throw "thenable4抛出错误"; // promise4状态为rejected }, }); }); promise4 .then((res) => { console.log(res); }) .catch((err) => { console.log(err); // thenable4抛出错误 });
-
-
如果
resolve
中传入的是另外一个Promise
,则会返回这个新的Promise
,那么这个新Promise
会决定原Promise
的状态const promise = new Promise((resolve, reject) => { console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行 resolve( new Promise((resolve, reject) => { resolve("resolvePromise"); }) ); }); promise.then((res) => { console.log(res); // resolvePromise }); // 相当于 new Promise((resolve) => resolve("resolvePromise")).then(res => console.log(res))
Promise实例方法
then方法
then
方法是Promise
对象上的一个方法(实例方法),它其实是放在Promise
的原型上的 Promise.prototype.then
两个参数
then
方法接受两个参数:
fulfilled
的回调函数:当状态变成fulfilled
时会回调的函数rejected
的回调函数:当状态变成rejected
时会回调的函数
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
reject('失败');
});
// promise
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log(err); // 失败
// });
// 等价于
promise.then(
(res) => {
console.log(res);
},
(err) => {
console.log(err); // 失败
}
);
多次调用
一个Promise
的then
方法是可以被多次调用的,都会在 Promise
状态 fulfilled
时被依次调用且彼此独立
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("结果"), 1000);
});
promise.then(result => {
console.log("第一个 then:", result);
});
promise.then(result => {
console.log("第二个 then:", result);
});
promise.then(result => {
console.log("第三个 then:", result);
});
// 输出:第一个 then: 结果; 第二个 then: 结果; 第三个 then: 结果
返回值
then
方法本身是有返回值的,它的返回值是一个Promise
,从而可以进行链式调用
- 但是
then
方法返回的Promise
到底处于什么样的状态呢?-
当
then
方法中的回调函数本身在执行的时候,那么它处于pending
状态 -
当
then
方法中的回调函数返回一个结果时,那么它处于fulfilled
状态,并且会将结果作为resolve
的参数 -
当
then
方法抛出一个异常时,那么它处于rejected
状态
-
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
resolve("成功");
});
promise
.then((res) => {
console.log(res); // 打印:成功
// return 123; // 这时then方法返回的promise状态是fulfilled
throw "thenPromise失败"; // 这时then方法返回的promise状态是rejected
})
.then((res) => {
console.log(res); // 123
})
.catch((err) => {
console.log(err); // thenPromise失败
});
catch方法
catch
方法是Promise
对象上的一个方法(实例方法),是放在Promise
的原型上的 Promise.prototype.catch
多次调用
Promise
的catch
方法是可以被多次调用的,当Promise
的状态变成reject
的时候,这些回调函数都会被依次执行
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
reject("失败");
});
promise.catch((err) => {
console.log("第一catch回调执行:" + err);
});
promise.catch((err) => {
console.log("第二catch回调执行:" + err);
});
promise.catch((err) => {
console.log("第三catch回调执行:" + err);
});
// 输出:第一catch回调执行:失败;第二catch回调执行:失败;第三catch回调执行:失败
返回值
catch
方法也是返回一个Promise
对象的,所以catch
方法后可以继续调用then
方法或者catch
方法:如果我们希望后续继续执行catch
,那么需要抛出一个异常
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
reject("失败");
});
promise
.catch((err) => {
throw "catchPromise失败"; // 需要执行后续的catch要抛出异常
})
.catch((err) => {
console.log(err); // catchPromise失败
});
会有报错情况:下面例子如果没有直接在 promise
实例上调用catch
,后面的 .then()
链式调用会将异常向下传播,最终被找到的 .catch()
捕获,即被最近的catch
捕获
- 如果不写最后的
catch
或者其他形式的错误处理(比如then
中的第二个参数),Promise
在被拒绝(rejected
)后,浏览器会错误提示(unhandled promise rejection
)
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
reject("失败");
});
promise
.then((res) => {
throw "then1Throw";
})
.then((res) => {
throw "then2Throw";
})
.catch((err) => {
console.log(err); // 失败
});
finally方法
finally
是在ES9(ES2018)
中新增的一个特性:表示无论Promise
对象无论变成fulfilled
还是rejected
状态,最终都会被执行,finally
方法不接收参数
const promise = new Promise((resolve, reject) => {
console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
// reject('失败')
resolve("成功");
});
promise
.then((res) => {
console.log(res) // 成功
})
.catch((err) => {
console.log(err); // 失败
})
.finally(() => {
console.log("finally"); // 成功失败都会执行打印
});
Promise类方法
前面的then、catch、finally
方法都属于Promise
的实例方法,都是存放在Promise
的prototype
上的,后面的类方法就是直接通过Promise
调用的
resolve方法
一个用于将现有的值转换为一个已成功完成(fulfilled
)的 Promise
对象的方法,Promise.resolve
的用法相当于new Promise
,并且执行resolve
操作
- 传递值的情况和上面
resolve
传不同值情况一样
Promise.resolve("123").then((res) => {
console.log(res); // 123
});
// Promise.resolve("123") 相当于 new Promise((resolve) => resolve(123))
reject方法
和Promise.resolve
类似,一个用于将现有的值转换为一个已拒绝(rejected
)的 Promise
对象的方法,Promise.reject
的用法相当于new Promise
,并且执行reject
操作
- 传入的参数无论是什么形态,都会直接作为
rejected
状态的参数传递到catch
的
Promise.reject("123").catch((res) => {
console.log(res); // 123
});
// Promise.reject("123") 相当于 new Promise((reject) => reject(123))
all方法
它的作用是将多个Promise
包裹在一起形成一个新的Promise
- 新的
Promise
状态由包裹的所有Promise
共同决定-
必须当所有的
Promise
状态变成fulfilled
状态时,新的Promise
状态为fulfilled
,并且会将所有Promise
的返回值组成一个数组 -
当有一个
Promise
状态为reject
时,新的Promise
状态为rejected
,并且会将第一个reject
的返回值作为catch
参数
-
const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve) => resolve("promise2"));
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.all([promise1, promise2, promise3]).then((res) => {
console.log(res); // ['promise1', 'promise2', 'promise3']
});
const promise4 = new Promise((resolve) => resolve("promise4"));
const promise5 = new Promise((resolve, reject) =>
reject("promise5Reject")
);
const promise6 = new Promise((resolve) => resolve("promise6"));
Promise.all([promise4, promise5, promise6]).catch((err) => {
console.log(err); // promise5Reject
});
all
方法有一个缺陷:当有其中一个Promise
变成reject
状态时,新Promise
就会立即变成对应的reject
状态,那么对于resolved
的和处于pending
状态的Promise
,获取不到对应的结果
allSettlet方法
解决了all
的缺陷,在ES11(ES2020)
中,添加了新的API Promise.allSettled
-
该方法会在所有的
Promise
都有结果时才会有最终的状态,这个新Promise
的状态一定是fulfilled
的 -
allSettled
的结果是一个数组,数组中存放着每一个Promise
的结果对应一个对象的,这个对象中包含status
状态,以及对应的value
值
const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve, reject) =>
reject("promise2Reject")
);
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.allSettled([promise1, promise2, promise3])
.then((res) => {
console.log(res);
});
race方法
多个Promise
时,当有一个Promise
有了最终状态,希望这个状态是最新Promise
的状态,那么可以使用race
方法
race
是竞技、竞赛的意思,表示多个Promise
相互竞争,谁先有结果,那么就使用谁的结果
const promise1 = new Promise(() => {});
const promise2 = new Promise((resolve, reject) =>
reject("promise2Reject")
);
Promise.race([promise1, promise2])
.then((res) => {
console.log(res); // 不会执行
})
.catch((err) => {
console.log(err); // promise2Reject
});
any方法
any
方法是ES12
中新增的方法,和race
方法是类似的
-
any
方法会等到一个fulfilled
状态,才决定新Promise
为fulfilled
状态 -
如果所有的
Promise
都是rejected
的,会等到所有的Promise
变成rejected
状态时catch
回调报错:AggregateError: All promises were rejected
const promise1 = new Promise((resolve, reject) =>
reject("promise1Reject")
);
const promise2 = new Promise((resolve) => resolve("promise2"));
Promise.any([promise1, promise2])
.then((res) => {
console.log(res); // promise2
})
.catch((err) => {
console.log(err);
});
手写Promise
具体待后面练习后补充