Promise源码解密-Promise A+标准

2401_84153285

于 2024-04-20 02:27:52 发布

阅读量609

点赞数 8

分类专栏：程序员文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2401_84153285/article/details/137983765

版权

程序员专栏收录该内容

171 篇文章 0 订阅

订阅专栏

本文详细介绍了Promise对象的三种状态（pending,fulfilled,rejected），重点阐述了Promise的then方法如何处理成功和拒绝状态，以及onFulfilled和onRejected回调函数的使用规则。同时解释了Promise解决过程的基本原理和应用场景。

摘要由CSDN通过智能技术生成

const STATUS_PENDING = “pending”;

const STATUS_FULFILLED = “fulfilled”;

const STATUS_REJECTED = “rejected”;

class Promise {

constructor(executor) {

this.status = STATUS_PENDING;

}

1.1. 等待（Pending）

处于等待时，状态可以迁移至执行态或拒绝态

1.2. 执行（Fulfilled）

处于执行时：

不能迁移至其他任何状态
必须拥有一个不可变的终值

1.3. 拒绝（Rejected）

处于拒绝时：

不能迁移至其他任何状态
必须拥有一个不可变的reason

这里的不可变指的是恒等（即可用 === 判断相等），引用数据类型只要保证地址相等即可。

new Promise((resolve, reject) => {

resolve(‘成功’);

reject(‘拒绝’)

}).then((res) => {

console.log(res，“res”)

}, (error) => {

console.log(error,‘reason’)

})

new Promise()时状态是pending，

当程序执行，也就是(resolve, reject) => {

resolve(‘成功’);

reject(‘拒绝’)

}，这个执行

这里resolve把值进行了this.value = “成功”;，但是并不会this.reason=‘拒绝’，

这是因为只有出现了执行就不会出现拒绝，最后输出的结果是"成功 res",

如果注释掉resolve(‘成功’);，最后输出的结果是 “拒绝 reason”。

2. Then 方法

一个 promise 必须提供一个 then 方法以访问其当前值、终值和 reason。

promise 的 then 方法接受两个函数参数：

promise.then(onFulfilled, onRejected)

then((res) => {

console.log(res，“res”)

}, (error) => {

console.log(error,‘reason’)

})

2.1 `onFulfilled` 和 `onRejected` 都是可选参数。

如果 onFulfilled 不是函数，必须被忽略
如果 onRejected 不是函数，必须被忽略

2.2 `onFulfilled`

如果 onFulfilled 是函数：

当 promise 执行结束后其必须被调用，其第一个参数为 promise的value
在 promise 执行结束前其不可被调用
其调用次数不可超过一次

new Promise((resolve, reject) => {

resolve(123)

}).then(result => {

console.log(result);

}, error => {

console.log(error);

});

// 这里resolve执行结束才会执行then，这里的result就是终值

2.3 onRejected

如果 onRejected 是函数：

当 promise 被拒绝执行后其必须被调用，其第一个参数为 promise 的reason
在 promise 被拒绝执行前其不可被调用
其调用次数不可超过一次

2.4 调用时机

onFulfilled 和 onRejected 只有在执行环境堆栈仅包含平台代码时才可被调用 >> 注1

2.5 调用要求

onFulfilled 和 onRejected 必须被作为函数调用（即没有 this 值）>> 注2

2.6 多次调用

then方法可以被同一个promise 调用多次

当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调

new Promise.then().then()

2.7 返回

then 方法必须返回一个 promise 对象 >> 注3, 这也就是then可以被多次调用的原因。

Promise.prototype.then=function(onFulfilled, onRejected){

return new Promise()

}

promise2 = promise1.then(onFulfilled, onRejected);

如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行下面的 Promise 解决过程：[[Resolve]](promise2, x)

promise1.then((value)=>{

return x；

}, (reason)=>{

return x

}),

// 这种情况需要处理x函数还是值还是其他情况，所有用到了 Promise 解决过程

// 这种情况直接

Promise.prototype.then=function(onFulfilled, onRejected){

return let promise2 = new Promise((resolve,reject)=>{

try {

let x = onFulfilled(this.value);

resolvePromise(promise2, x, resolve, reject);

} catch (e) {

reject(e);

}

})

}

如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e

promise1.then((value)=>{

throw new Error()

}, (reason)=>{

throw new Error()

}),

// 这种情况直接

Promise.prototype.then=function(onFulfilled, onRejected){

return new Promise((resolve,reject)=>{

try {

// console.log(“执行 onFulfilled”);

// 这里的x是啥？是then中回调的return的返回值

onFulfilled(this.value);

或者

onReject(this.reason)

} catch (e) {

reject(e);

}

})

}

如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值

promise1.then(1,2),

Promise.prototype.then=function(onFulfilled, onRejected){

if (this.status === STATUS_FULFILLED) {

return new Promise((resolve,reject)=>{

if(typeof onFulfilled !== “function” ){

resolve(onFulfilled)

}

if(typeof onRejected !== “function” ){

resolve(onRejected)

}

})

}

如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的reason

promise1.then(1,2),

Promise.prototype.then=function(onFulfilled, onRejected){

if (this.status === STATUS_PENDING) {

return new Promise((resolve,reject)=>{

reject(onRejected)

})

}

Promise 解决过程

Promise 解决过程是需要输入一个 promise 和一个值 x 的一个抽象的操作，称为 [[Resolve]](promise, x)，如果 x 有 then 方法且看上去像一个 Promise ，解决程序即尝试使 promise 接受 x 的状态；否则其用 x 的值来执行 promise 。(x是返回值，请注意上面的例子)

解决过程步骤：