手动封装promise实现链式操作

文章详细介绍了如何实现一个简单的Promise类myPromise,包括构造器、resolve和reject方法,以及then和catch方法的处理,用于处理异步操作和链式调用。通过示例展示了Promise的用法,如异步执行和错误处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

已经不知道咋讲了,从第一版看到这里如果看不懂,就去看B站李立超老师的视频把

class myPromise {
    // #相当于private,能让属性或者方法称为私有属性或者方法,只能在class中使用,实例无法使用,
    // 状态、结果、以及resolve和reject我们只希望在class中使用、修改,不能通过实例直接修改,所以要变成私有的
    #state = 0;  // 0为pending 1为fulfilled 2为rejected
    #result; // 存放resolve或者reject传过来的值
    #callbacks = []; // 存放回调函数
    constructor(executor) { // 构造器,在创建实例时,会自动调用这个函数
        executor(this.#resolve.bind(this), this.#reject.bind(this))
        // executor是创建实例时传进来的回调函数,我们要在实例创建时就调用
        // executor中又传入了两个参数,分别是resolve和reject,分别要成功或者失败的值储存起来
    }
    #resolve(value) {
        // 当resolve执行时,代表值已经传进来了,
        // 这里的value是创建实例时resolve传过来的值
        if (this.#state !== 0) return;
        this.#result = value;
        this.#state = 1; // 状态为fulfilled
        // 解决异步执行问题
        queueMicrotask(() => { // 将任务放到微任务队列中
            this.#callbacks.forEach(cb => {
                cb();
            })
        })
    }
    #reject(reason) {
        // 这里的reason是创建实例时reject传过来的值
        if (this.#state !== 0) return;
        this.#result = reason;
        this.#state = 2; // 状态为rejected
        // 解决异步执行问题
        queueMicrotask(() => { // 将任务放到微任务队列中
            this.#callbacks.forEach(cb => {
                cb();
            })
        })
    }
    then(onFullfilled, onRejected) { // then方法里面接收两个参数,一个是成功时执行的代码,一个是失败时执行的代码
        return new myPromise((resolve, reject) => {  // 要实现链式操作,要保证返回的是一个myPromise对象
            if (this.#state === 0) { // 此时this.#result还没有值,需要将回调函数传给callback,由#resolve代为执行
                this.#callbacks.push(() => resolve(onFullfilled(this.#result)));  // 要将onfulfilled的结果传给resolve
            }
            else if (this.#state === 1) {
                resolve(onFullfilled(this.#result));
            }
            else if (this.#state === 2 && onRejected) {
                reject(onRejected(this.#result));
            }
        })
    }
    catch(onRejected) { // catch方法里接收一个参数,是失败时执行的代码
        return new myPromise((resolve, reject) => {
            if (this.#state === 0) {
                this.#callbacks.push(() => resolve(onRejected(this.#result)))
            }
            else if (this.#state === 2 && onRejected) {
                resolve(onRejected(this.#result));
            }
        })
    }
}
let promise = new myPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("异步执行")
    }, 1000);
})
promise.then(res => {
    console.log(res);
    return "链式操作"
}).then(res=>{
    console.log(res);
})
let promise2 = new myPromise((resolve,reject)=>{
    reject("失败了");
})
promise2.catch(err=>{
    console.log(err)
    return "失败后then"
}).then(res=>{
    console.log(res);
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值