这两天在看B站李立超老师的视频,跟着手动封装一个promise
这是第一版的promise,只是一个简单的封装,还没有实现异步解决方法、链式操作,但是我认为这对promise的理解还是有一定帮助的,有需要的同学也可以直接看这个视频Node.js完全指南(直播回放)李立超
我写的时候添加了一些注释,如果有欠缺的地方,烦请指出。
后面也会跟着视频敲出更完整的代码,但是想从易到难地进行,所以选择将每一版的代码分别做一个记录,也更容易理解。
class myPromise {
// #相当于private,能让属性或者方法称为私有属性或者方法,只能在class中使用,实例无法使用,
// 状态、结果、以及resolve和reject我们只希望在class中使用、修改,不能通过实例直接修改,所以要变成私有的
#state = 0; // 0为pending 1为fulfilled 2为rejected
#result; // 存放resolve或者reject传过来的值
constructor(executor) { // 构造器,在创建实例时,会自动调用这个函数
executor(this.#resolve.bind(this), this.#reject.bind(this))
// executor是创建实例时传进来的回调函数,我们要在实例创建时就调用
// executor中又传入了两个参数,分别是resolve和reject,分别要成功或者失败的值储存起来
}
#resolve(value) {
// 这里的value是创建实例时resolve传过来的值
if (this.#state !== 0) return;
this.#result = value;
this.#state = 1; // 状态为fulfilled
}
#reject(reason) {
// 这里的reason是创建实例时reject传过来的值
if (this.#state !== 0) return;
this.#result = reason;
this.#state = 2; // 状态为rejected
}
then(onFullfilled, onRejected) { // then方法里面接收两个参数,一个是成功时执行的代码,一个是失败时执行的代码
if (this.#state === 1) {
onFullfilled(this.#result);
}
if (this.#state === 2 && onRejected) {
onRejected(this.#result);
}
}
catch(onRejected){ // catch方法里接收一个参数,是失败时执行的代码
if (this.#state === 2) {
onRejected(this.#result);
}
}
}
let promise = new myPromise((resolve, reject) => {
resolve("成功了");
})
promise.then(res => {
console.log(res,"then");
})
let promise2 = new myPromise((resolve,reject)=>{
reject("失败了");
})
promise2.catch(err=>{
console.log(err,"catch");
})