Promise源码解密-异步版

关注专栏 Promise源码解密,带你走进Promise的深处！！！

---

解决了啥

在同步版本中，我们在执行器中编写异步代码的情况下，

会导致先执行then，在执行异步的方法中的resolve或者reject。

所以我们就需要将then中接收到的方法转移到执行器中的异步方法中执行。

我们只需要将then接收到的方法，展示存起来，当调用到resolve/reject时，再执行then接收到的方法

代码

// 定义状态常量

const STATUS_PENDING = 'pending'

const STATUS_FULFILLED = 'fulfilled'

const STATUS_REJECTED = 'rejected'

class MyPromise {



    // 接收一个 执行器

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

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

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

    constructor(executor) {

        this.status = STATUS_PENDING

        this.value = undefined

        this.reason = undefined

        this.onFulfilledCallBacks = []

        this.onRejectCallBacks = []

        try {

            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

            // 如果有存放起来的then接收的函数，立即遍历执行，这样保证then方法还是最后调用

            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) {

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

        if (this.status === STATUS_FULFILLED) {

            console.log("执行 onFulfilled")

            onFulfilled(this.value)

        }

        if (this.status === STATUS_REJECTED) {

            console.log("执行 onReject")

            onReject(this.reason)

        }

        // 如果状态是pending的话，暂时存放起来。

        // 在异步情况下，回先执行then，所以状态是pending

        if (this.status === STATUS_PENDING) {

            this.onFulfilledCallBacks.push(() => onFulfilled(this.value))

            this.onRejectCallBacks.push(() => onReject(this.reason))

        }

    }

}



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

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

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

    // // resolve("res")

    // reject('reject')

    setTimeout(() => {
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/52af811640ed4895e4f7d7fbf38ae0f0.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/e23f71cc944e3bc47d24c0309cfea0e6.png)

![](https://img-blog.csdnimg.cn/img_convert/4075d0d37284a3a492e09c27de035282.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
ndroid开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**