Promise内幕揭秘：手写实现背后的奥秘

最新推荐文章于 2024-11-08 17:24:22 发布
最新推荐文章于 2024-11-08 17:24:22 发布
阅读量1.4k 收藏 77
点赞数 94
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288600/article/details/141754331
版权

前言

 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：南木元元

在之前的文章中我们已经了解了Promise的基本用法，今天我们就来手写实现一下Promise。

目录

resolve和reject方法

1.实现resolve和reject

2.状态不可变

3.throw

then方法

1.实现then

2.定时器情况

3.链式调用

4.微任务

结语

resolve和reject方法

Promise其实就是一个容器，里面保存异步操作的结果。来看一段Promise的代码：

let p1 = new Promise((resolve, reject) => {
    resolve('成功')
    reject('失败')
})
console.log('p1', p1)

let p2 = new Promise((resolve, reject) => {
    reject('失败')
    resolve('成功')
})
console.log('p2', p2)

let p3 = new Promise((resolve, reject) => {
    throw('报错')
})
console.log('p3', p3)

在浏览器输出一下看看：

我们来分析一下其中的原理：

1.Promise 是一个类，在执行这个类的时候会传入一个执行器，这个执行器会立即执行。

2.执行了resolve，Promise状态会变成fulfilled。

3.执行了reject，Promise状态会变成rejected。

4.Promise只以第一次为准，状态一经改变，就无法再被改变了。

5.Promise中有throw的话，就相当于执行了reject。

下面就来一一实现。

1.实现resolve和reject

新建一个 MyPromise 类，传入执行器 executor。

// 新建 MyPromise 类
class MyPromise {
  // 构造方法，executor是一个执行器，即为传进来的函数 (resolve, reject) => {}
  constructor(executor){
    // 进入会立即执行executor
    executor() 
  }
}

初始化，接收传入的 resolve 和 reject 方法。其中有很重要的一步是绑定this，这是为了让resolve和reject的this指向永远指向当前的MyPromise实例，防止随着函数执行环境的改变而改变。

class MyPromise {
    // 构造方法，executor是一个执行器，即为传进来的函数 (resolve, reject) => {}
    constructor(executor) {
        // 初始化值
        this.result = null; // 终值
        this.state = "pending"; // 状态
        // 绑定this
        this.resolve = this.resolve.bind(this);
        this.reject = this.reject.bind(this);
        // 执行传进来的函数
        executor(this.resolve, this.reject)
    }

    resolve(value) {
        // 如果执行resolve，状态变为fulfilled
        this.state = "fulfilled"
        // 终值为传进来的值
        this.result = value
    }

    reject(reason) {
        // 如果执行reject，状态变为rejected
        this.state = "rejected"
        // 终值为传进来的reason
        this.result = reason
    }
}

现在来测试一下代码：

const test1 = new MyPromise((resolve, reject) => {
    resolve('成功')
})
console.log(test1) 

const test2 = new MyPromise((resolve, reject) => {
    reject('失败')
})
console.log(test2)

2.状态不可变

上面的代码是有问题的。

const test1 = new MyPromise((resolve, reject) => {
    resolve('成功')
    reject('失败')
})
console.log(test1)

正确的应该是fulfilled成功状态，这里明显没有以第一次为准，状态没有凝固。

解决起来很简单，只需加个条件判断：

resolve(value) {
    // state是不可变的，只有状态是等待，才执行状态修改
    if (this.state === "pending") {
        // 如果执行resolve，状态变为fulfilled
        this.state = "fulfilled";
        // 终值为传进来的值
        this.result = value;
    }
}

reject(reason) {
    // state是不可变的，只有状态是等待，才执行状态修改
    if (this.state === "pending") {
        // 如果执行reject，状态变为rejected
        this.state = "rejected";
        // 终值为传进来的reason
        this.result = reason;
    }
}

再来测试下：

3.throw

Promise中有throw的话，就相当于执行了reject。使用try...catch来捕获错误：

try {
    // 执行传进来的函数
    executor(this.resolve, this.reject);
} catch (error) {
    // 捕捉到错误直接执行reject
    this.reject(error);
}

来测试下：

then方法

then 方法接收两个回调，一个是成功回调，一个是失败回调，内部做的事情就是进行状态判断：

  • 如果Promise状态是fulfilled则执行成功回调
  • 如果Promise状态是rejected则执行失败回调
// 马上输出 ”成功“
const p1 = new Promise((resolve, reject) => {
    resolve('成功')
}).then(res => console.log(res), err => console.log(err))

下面就来一步一步地实现then方法。

1.实现then

// 接收两个回调 onFulfilled, onRejected
then(onFulfilled, onRejected) {
    // 参数校验，确保一定是函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

    if (this.state === 'fulfilled') {
        // 如果当前为成功状态，执行第一个回调
        onFulfilled(this.result)
    } else if (this.state === 'rejected') {
        // 如果当前为失败状态，执行第二哥回调
        onRejected(this.result)
    }
}

来测试下：

const test = new MyPromise((resolve, reject) => {
    resolve('成功')
}).then(res => console.log(res), err => console.log(err))

2.定时器情况

如resolve或reject在定时器里，则需要定时器结束后再执行then。 

// 1秒后输出 ”失败“
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('失败')
    }, 1000)
}).then(res => console.log(res), err => console.log(err))

上面代码中，怎么才能保证，1秒后才执行then里的失败回调呢？答案是使用数组来保存回调。

为什么使用数组呢？因为一个promise实例可能会多次then。如下：

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
})
 
promise.then(value => {
  console.log(2)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value)
})

使用数组就可以一个一个保存下来，后续再去一个个执行。

那如何判断定时器是否执行完毕呢？很简单，只要状态是pending，就证明定时器还没跑完。等定时器结束，执行了resolve或者reject，再去判断要去执行哪个数组中的回调函数。

实现代码： 

constructor(executor) {
    // 初始化值
    this.result = null; // 终值
    this.state = "pending"; // 状态
    // Promise中有异步逻辑的情况，执行then还是pending状态，暂时保存两个回调
    this.onFulfilledCallbacks = []; // 保存成功回调
    this.onRejectedCallbacks = []; // 保存失败回调
    ...
}

resolve(value) {
    // state是不可变的，只有状态是等待，才执行状态修改
    if (this.state === "pending") {
        // 如果执行resolve，状态变为fulfilled
        this.state = "fulfilled";
        // 终值为传进来的值
        this.result = value;
        // 执行保存的成功回调(如果Promise中有异步逻辑的情况)
        while (this.onFulfilledCallbacks.length) {
            // 删除并返回数组中第一个回调函数，然后()调用
            this.onFulfilledCallbacks.shift()(this.result);
        }
    }
}

reject(reason) {
    // state是不可变的，只有状态是等待，才执行状态修改
    if (this.state === "pending") {
        // 如果执行reject，状态变为rejected
        this.state = "rejected";
        // 终值为传进来的reason
        this.result = reason;
        // 执行保存的失败回调(如果Promise中有异步逻辑的情况)
        while (this.onRejectedCallbacks.length) {
            this.onRejectedCallbacks.shift()(this.result);
        }
    }
}

// 接收两个回调 onFulfilled, onRejected
then(onFulfilled, onRejected) {
    // 参数校验，确保一定是函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

    if (this.state === 'fulfilled') {
        // 如果当前为成功状态，执行第一个回调
        onFulfilled(this.result)
    } else if (this.state === 'rejected') {
        // 如果当前为失败状态，执行第二哥回调
        onRejected(this.result)
    } else if (this.state === "pending") {
        // 如果当前状态为待定状态（即执行then方法的时候还是pending状态，就代表Promise中有异步逻辑），暂时保存两个回调
        // 等到异步操作结束，执行成功或失败函数的时候再执行回调
        this.onFulfilledCallbacks.push(onFulfilled);
        this.onRejectedCallbacks.push(onRejected);
    }
}

来测试下：

const test2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功') // 1秒后输出 成功
        // resolve('成功') // 1秒后输出 失败
    }, 1000)
}).then(res => console.log(res), err => console.log(err))

3.链式调用

then支持链式调用，下一次then执行受上一次then返回值的影响。

// 链式调用 输出 200
const p3 = new Promise((resolve, reject) => {
    resolve(100)
}).then(res => 2 * res, err => console.log(err))
    .then(res => console.log(res), err => console.log(err))

// 链式调用 输出300
const p4 = new Promise((resolve, reject) => {
    resolve(100)
}).then(res => new Promise((resolve, reject) => resolve(3 * res)), err => console.log(err))
    .then(res => console.log(res), err => console.log(err))

从上面示例中，我们可以总结出以下几个点：

1.then方法本身会返回一个新的Promise对象。

2.如果返回值是promise对象，返回值为成功，新promise就是成功。

3.如果返回值是promise对象，返回值为失败，新promise就是失败。

4.如果返回值非promise对象，新promise对象就是成功，值为此返回值。

如何实现then完还能再then呢？答案是then执行后返回一个Promise对象，就能继续then。

代码实现：

// 接收两个回调 onFulfilled, onRejected
then(onFulfilled, onRejected) {
    // 参数校验，确保一定是函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
    //then支持链式调用，本身会返回一个新的Promise对象
    var thenPromise = new MyPromise((resolve, reject) => {
        //cb是成功或失败的回调函数
        const resolvePromise = (cb) => {
            try {
                //执行回调并保存结果
                const x = cb(this.result);
                if (x === thenPromise) {
                    // then方法返回的不能是自身，避免循环引用
                    throw new Error("不能返回自身");
                }
                if (x instanceof MyPromise) {
                    // 如果回调函数的返回值是Promise
                    // 如果返回值是promise对象，返回值为成功，新promise就是成功
                    // 如果返回值是promise对象，返回值为失败，新promise就是失败
                    // 谁知道返回的promise是失败成功？只有then知道。
                    x.then(resolve, reject); 	//调用 then 方法，将其状态变为 fulfilled 或者 rejected
                } else {
                    // 非Promise就直接成功
                    resolve(x);
                }
            } catch (err) {
                reject(err);
            }
        };

        if (this.state === "fulfilled") {
            // 如果当前为成功状态，执行第一个回调(把成功回调传入resolvePromise统一处理)
            resolvePromise(onFulfilled);
        } else if (this.state === "rejected") {
            // 如果当前为失败状态，执行第二个回调(把失败回调传入resolvePromise统一处理)
            resolvePromise(onRejected);
        } else if (this.state === "pending") {
            // 如果当前状态为待定状态（即执行then方法的时候还是pending状态，就代表Promise中有异步逻辑），暂时保存两个回调
            // 等到异步操作结束，执行成功或失败函数的时候再执行回调
            this.onFulfilledCallbacks.push(onFulfilled);
            this.onRejectedCallbacks.push(onRejected);
        }
    });

    // 返回这个包装的Promise
    return thenPromise;
}

来测试下：

const test3 = new Promise((resolve, reject) => {
    resolve(100) // 输出 状态：成功 值： 200
    // reject(100) // 输出 状态：成功 值：300
}).then(res => 2 * res, err => 3 * err)
  .then(res => console.log('成功', res), err => console.log('失败', err))

const test4 = new Promise((resolve, reject) => {
    resolve(100) // 输出 状态：失败 值：200
    // reject(100) // 输出 状态：成功 值：300
}).then(res => new Promise((resolve, reject) => reject(2 * res)), err => new Promise((resolve, reject) => resolve(3 * err)))
  .then(res => console.log('成功', res), err => console.log('失败', err))

4.微任务

我们知道，then方法是一个微任务（如果不了解宏任务和微任务，可以去看这篇文章），这里我们使用定时器来让resolvePromise函数异步执行。

实现代码：

//cb是成功或失败的回调函数
const resolvePromise = (cb) => {
    //因为then是个微任务，这里使用定时器来模拟，让resolvePromise异步执行就行
    setTimeout(() => {
        try {
            //执行回调并保存结果
            const x = cb(this.result);
            if (x === thenPromise) {
                // then方法返回的不能是自身，避免循环引用
                throw new Error("不能返回自身");
            }
            if (x instanceof MyPromise) {
                // 如果回调函数的返回值是Promise
                // 如果返回值是promise对象，返回值为成功，新promise就是成功
                // 如果返回值是promise对象，返回值为失败，新promise就是失败
                // 谁知道返回的promise是失败成功？只有then知道。
                x.then(resolve, reject); 	//调用 then 方法，将其状态变为 fulfilled 或者 rejected
            } else {
                // 非Promise就直接成功
                resolve(x);
            }
        } catch (err) {
            reject(err);
        }
    });
};

来测试下：

const test4 = new MyPromise((resolve, reject) => {
    resolve(1)
}).then(res => console.log(res), err => console.log(err))

console.log(2)

好了，到这里，Promise就基本实现了。最后附上完整代码：

class MyPromise {
    constructor(executor) {
        // 初始化值
        this.result = null; // 终值
        this.state = "pending"; // 状态
        // Promise中有异步逻辑的情况，执行then还是pending状态，暂时保存两个回调
        this.onFulfilledCallbacks = []; // 保存成功回调
        this.onRejectedCallbacks = []; // 保存失败回调
        // 绑定this
        this.resolve = this.resolve.bind(this);
        this.reject = this.reject.bind(this);
        try {
            // 执行传进来的函数
            executor(this.resolve, this.reject);
        } catch (error) {
            // 捕捉到错误直接执行reject
            this.reject(error);
        }
    }

    resolve(value) {
        // state是不可变的，只有状态是等待，才执行状态修改
        if (this.state === "pending") {
            // 如果执行resolve，状态变为fulfilled
            this.state = "fulfilled";
            // 终值为传进来的值
            this.result = value;
            // 执行保存的成功回调
            while (this.onFulfilledCallbacks.length) {
                // 删除并返回数组中第一个回调函数，然后()调用
                this.onFulfilledCallbacks.shift()(this.result);
            }
        }
    }

    reject(reason) {
        // state是不可变的，只有状态是等待，才执行状态修改
        if (this.state === "pending") {
            // 如果执行reject，状态变为rejected
            this.state = "rejected";
            // 终值为传进来的reason
            this.result = reason;
            // 执行保存的失败回调
            while (this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(this.result);
            }
        }
    }

    // 接收两个回调 onFulfilled, onRejected
    then(onFulfilled, onRejected) {
        // 参数校验，确保一定是函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
        //then支持链式调用，本身会返回一个新的Promise对象
        var thenPromise = new MyPromise((resolve, reject) => {
            //cb是成功或失败的回调函数
            const resolvePromise = (cb) => {
                //因为then是个微任务，这里使用定时器来模拟，让resolvePromise异步执行就行
                setTimeout(() => {
                    try {
                        //执行回调并保存结果
                        const x = cb(this.result);
                        if (x === thenPromise) {
                            // then方法返回的不能是自身，避免循环引用
                            throw new Error("不能返回自身");
                        }
                        if (x instanceof MyPromise) {
                            // 如果回调函数的返回值是Promise
                            // 如果返回值是promise对象，返回值为成功，新promise就是成功
                            // 如果返回值是promise对象，返回值为失败，新promise就是失败
                            // 谁知道返回的promise是失败成功？只有then知道。
                            x.then(resolve, reject); 	//调用 then 方法，将其状态变为 fulfilled 或者 rejected
                        } else {
                            // 非Promise就直接成功
                            resolve(x);
                        }
                    } catch (err) {
                        reject(err);
                    }
                });
            };

            if (this.state === "fulfilled") {
                // 如果当前为成功状态，执行第一个回调(把成功回调传入resolvePromise统一处理)
                resolvePromise(onFulfilled);
            } else if (this.state === "rejected") {
                // 如果当前为失败状态，执行第二个回调(把失败回调传入resolvePromise统一处理)
                resolvePromise(onRejected);
            } else if (this.state === "pending") {
                // 如果当前状态为待定状态（即执行then方法的时候还是pending状态，就代表Promise中有异步逻辑），暂时保存两个回调
                // 等到异步操作结束，执行成功或失败函数的时候再执行回调
                this.onFulfilledCallbacks.push(onFulfilled);
                this.onRejectedCallbacks.push(onRejected);
            }
        });

        // 返回这个包装的Promise
        return thenPromise;
    }
}

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~ 

南木元元
关注
专栏目录
js-Promise：手写系列手写promise，vue ..
02-21
**JavaScript Promise：深入理解与手动实现** Promise 是 JavaScript 异步编程的一种解决方案，它解决了回调地狱（Callback Hell）的问题，让复杂的异步流程控制变得更加清晰和可读。Promise 在 ES6 中被正式引入，...
算法基础：手动实现promiseAll
01-21
算法基础：手动实现promiseAll
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
web-the-source-code:手写实现
04-06
手写实现可以帮助理解其背后的逻辑。 13. **模块化**：手动实现CommonJS或ES6模块的导入导出机制，理解模块间的依赖关系。 14. **类与继承**：理解JavaScript中的`class`关键字和原型链实现的继承，以及`super`...
simple-promise.js:遵循Promise A+规范的实现
05-01
实现一个简单的Promise simple-promise.js是基于Promise A+规范实现的简单的Promise库,通过Promise A+测试 npm install npm run test // 进行Promise A+测试(采用promises-aplus-test测试) Promise A+规范之外的...
Echarts 折线图
weixin_44443380的博客
11-08 157
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 287
关于vue2API的面试题
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 408
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 341
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 596
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
Electron + Vue3 开发桌面应用+附源码
m0_47483157的博客
11-08 416
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以在同一个项目中同时利用前端和后端的技术栈。Electron 主要特点跨平台：一次编写，可在 Windows、macOS 和 Linux 上运行。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 207
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 131
创建Vue实例 Vue指令
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 512
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
情怀系列国际版棋牌完整源码具备强大的多语言扩展功能，涵盖了900多款子游戏，专为全球市场的游戏开发和运营设计。
z926098的博客
11-05 399
客户端使用Cocos Creator进行跨平台开发，可以发布为App、H5网页和PC网页。这种跨平台的能力使运营商只需维护一套代码，就能同时管理多个终端。除此之外，系统还支持产品的热更新功能，大幅提升运营效率并降低成本，实现了产品层面的“降维打击”。情怀棋牌源代码的服务器端使用JAVA和Node.js开发，采用RocketMQ作为消息队列中间件，有效防止服务器堵塞、消峰。该源码包涵盖了完整的服务器端代码、服务端900款子游戏源码、客户端代码、客户端700款子游戏、管理后台代码、数据库以及热更新生成脚本等。
vue3+cesium实现测距测面功能
m0_65745337的博客
11-05 270
温馨提示：如有需要源码的，可私聊。1、初始化三维球，代码如下。
【TS】九天学会TS语法——4.TypeScript 接口深入解析
m0_59873661的博客
11-07 903
今天学习 TypeScript 的接口，以及了解如何定义对象的形状等内容。
时间管理应用（可复制源码）
最新发布
无限大的博客
11-08 265
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript。
241107-离线环境下RHEL通过Python配置BerkeleyDB数据库
专注机器学习之路
11-07 637
安装 Python 绑定前，系统需要已经安装了 BerkeleyDB C 库，并且头文件可供访问。如果你已经按照之前的步骤安装了 BerkeleyDB 5.3.28，请确保环境变量正确配置，以便编译时能够找到库和头文件。按照这些步骤，你应该能够成功地在指定路径下完成BerkeleyDB 5.3.28的离线安装。通过这些步骤，你应该可以验证 BerkeleyDB 5.3.28 是否已正确安装和配置。如果您还需要安装npm的离线包，您可以提前在联网的机器上用。安装完成后，启动 Python 解释器并验证。
评论 62
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南木元元

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值