【JavaScript】如何手写一个Promise

最新推荐文章于 2024-04-04 15:48:33 发布

AI画手小王

最新推荐文章于 2024-04-04 15:48:33 发布

阅读量261

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_53225741/article/details/129379409

版权

本文通过编写myPromise，详细解释了Promise的工作原理，包括同步和异步执行的存取、状态管理、任务队列优化以及实现then的链式调用。通过实例解析，帮助读者深入理解Promise的内部机制。

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

前言

本文主要内容：通过编写一个 myPromise 对象来进一步了解 Promise 的运行机制

手写 Promise 应该就是理解 Promise 逻辑的最好办法，所以虽然掘金上已经有无数手写 Promise 的文章，我还是打算通过类似做笔记的办法手写一遍 Promise 来加深一下理解

先来看看原生的Promise是如何定义的

const promise = new Promise((resolve, reject) =>{

};

所以我们要定义一个myPromise，首先是定义一个类，如下代码定义后进行了创建

class myPromise {

}

const mp = new myPromise((resolve, reject) => {})

可以看到创建时填写了一个函数，而这个函数实际上是会被传入myPromise类的构造函数中作为参数的，如下

class myPromise {constructor(executor) {executor();}
}

const mp = new myPromise((resolve, reject) => {console.log("test");
})

也就是constructor接收了console.log("test")这个函数参数，然后进一步通过executor()调用了

而我们传入的这个函数是有 resolve 和 reject 两个参数的，而这就需要在 myPromise 类中定义后传入，代码如下

class myPromise {constructor(executor) {executor(this.resolve,this.reject);}resolve() {}reject() {}
}

所以这样我们就将myPromise中的两个方法传给了构造函数中函数的两个参数

这里还有一个问题就是我们希望resolve作为私有方法被调用，所以加上#

因此，定义myPromise类的最终结果如下

class myPromise {constructor(executor) {executor(this.#resolve,this.#reject);}#resolve(value) {}#rej

关注