Promise源码解密-then的链式调用，前端核心知识点

function resolvePromise(promise2, x, resolve, reject) {

// 用来保存是否已经reject或者resolve过

let called

if (promise2 === x) {

throw new TypeError(‘Chaining cycle detected for promise’)

}

// 如果是函数或者object的话先默认是promise

if (x != null && (typeof x === ‘object’ || typeof x === ‘function’)) {

try {

let then = x.then

// 如果then是函数的话

if (typeof then === ‘function’) {

// 为啥不直接x.then()

// 因为then已经判断过是不是function，但是x.then没有判断过

// 就让then执行 第一个参数是this 后面是成功的回调 和 失败的回调

// 这里的y是啥，如果x是promsie的话,那么y就是x中的resolve/reject的值

then.call(x, y => {

// 成功和失败只能调用一个

if (called) return;

called = true;

console.log(y, ‘yyyyyyyyyyyy’)

// resolve的结果依旧是promise 那就继续解析

resolvePromise(promise2, y, resolve, reject);

}, err => {

// 成功和失败只能调用一个

if (called) return;

called = true;

reject(err);

})

} else {

resolve(x); // 如果不是函数，那就直接返回结果

}

} catch (error) {

// 成功和失败只能调用一个

if (called) return;

called = true;

// 没有then 不是函数也不是普通值

reject(error)

}

} else {

// x 是一个普通值

resolve(x)

}

}

class MyPromise {

// 接收一个 执行器

// new Promise的时候，执行器立即执行，

// 执行的时候根据指定函数执行

// 并且程序报错的情况下

constructor(executor) {

this.status = STATUS_PENDING;

this.value = undefined;

this.reason = undefined;

// 这里的两个数据，相当于订阅者的篮子，then相当于订阅者，接收到发布者的函数，保存在篮子里

this.onFulfilledCallBacks = [];

this.onRejectCallBacks = [];

try {

// 这里将传入的resolve和reject变为类中的调用的话。

// (resolve, reject) => {

// resolve(“then链式调用”);=>this.resolve(then链式调用)

// }

executor(this.resolve, this.reject);

} catch (error) {

// 报错的话直接将错误原因作为reason

this.reject(error);

}

}

// 这里为啥使用箭头函数而不是resolve(){}

// 这是因为上面的executor调用的时候，resolve中的this其实是undefined

// executor单独调用了resolve/reject 这时，这两个方法存在于执行是的环境，this不再指向实例

// 箭头函数内部的this总是指向定义时所在的对象

resolve = (value) => {

// 判断状态是不是

if (this.status === STATUS_PENDING) {

console.log(“执行resolve”);

// 这里接收传进来的结果

this.value = value;

this.status = STATUS_FULFILLED;

this.onFulfilledCallBacks.forEach((fn) => {

fn();

});

}

};

reject = (reason) => {

if (this.status === STATUS_PENDING) {

console.log(“执行reject”);

// 这里接收传进来的错误的结果

this.reason = reason;

this.status = STATUS_REJECTED;

// 这里相当于发布的动作

this.onRejectCallBacks.forEach((fn) => {

fn();

});

}

};

then(onFulfilled, onReject) {

onFulfilled =

typeof onFulfilled === “function” ? onFulfilled : (value) => value;

onReject = typeof onReject === “function” ? onReject : (reason) => reason;

console.log("执行then时的状态: ", this.status);

let promise2 = new MyPromise((resolve, reject) => {

if (this.status === STATUS_FULFILLED) {

// 这个地方使用settimeout的目的是获取到promise2。因为setTimeout是异步的，

// 会等到赋值给promise2结束后才执行，

// 这里的resolvePromise的作用是为了区分x是普通值还是新的promise还是函数

// 如果直接resolve（x）的话会导致，输出的是[object Object] res====，并不是想要的值

setTimeout(() => {

// 这里try进行了捕获异常，在最外面的executor不是进行了捕获了？

// 这是因为异步里面的方法不会被最外层的那个捕获到

try {

console.log(“执行 onFulfilled”);

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

let x = onFulfilled(this.value);

resolvePromise(promise2, x, resolve, reject);

} catch (e) {

reject(e);

}

}, 0);

}

if (this.status === STATUS_REJECTED) {

setTimeout(() => {

try {

console.log(“执行 onReject”);

let x = onReject(this.reason);

resolvePromise(promise2, x, resolve, reject);

} catch (e) {

reject(e);

}

}, 0);

}

if (this.status === STATUS_PENDING) {

this.onFulfilledCallBacks.push(() =>

setTimeout(() => {

try {

let x = onFulfilled(this.value);

resolvePromise(promise2, x, resolve, reject);

} catch (e) {

reject(e);

}

}, 0)

);

this.onRejectCallBacks.push(() =>

setTimeout(() => {

try {

let x = onRejected(this.reason);

resolvePromise(promise2, x, resolve, reject);

} catch (e) {

reject(e);

}

}, 0)

);

}

});

return promise2;

}

}

// 下面的函数相当于发布者

let t = new MyPromise((resolve, reject) => {

// 指定执行哪个，resolve和reject最终只会执行一个

// console.log(a) // 执行console会报错，最终只会执行reject

// // resolve(“res”)

// reject(‘reject’)

// setTimeout(() => {

resolve(“then链式调用”);

// }, 1000)

});

t.then(() => {

return new MyPromise((resolve) => {

console.log(2);

setTimeout(() => {

resolve(3);

}, 3000);

});

}).then(

(res) => {

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。