百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

手写 Promise（手写promise a+规范脚本之家）

liuian 2025-03-25 15:21 17 浏览

前言

都 2020 年了，Promise 大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合 PromiseA+ 规范的 Promise。

附 PromiseA+ 规范地址：
https://promisesaplus.com/

简单版

我们都知道 Promise 的调用方式，new Promise(executor)， executor 两个参数，resolve，reject。所以现在我们的代码长这样

class Promise {
    constructor(executor) {
       const resolve = () => {}
       const reject = () => {}
       executor(resolve, rejcet)
    }
}

Promise 内部有三个状态，pending、fulfilled、rejected，初始是 pending，调用 resolve 后变为 fulfilled,，调用 reject 后变为 rejected。fulfilled 时会调用 then 注册的成功的回调，rejected 时会调用 then 注册的失败的回调。


// Promise 内部状态
const STATUS = { PENDING: 'PENDING', FUFILLED: 'FUFILLED', REJECTED: 'REJECTED' }

class Promise {
    constructor(executor) {
        this.status = STATUS.PENDING;
        this.value = undefined; // 成过的值
        this.reason = undefined; // 失败的值
        const resolve = (val) => {
            if (this.status == STATUS.PENDING) {
                this.status = STATUS.FUFILLED;
                this.value = val;
            }
        }
        const reject = (reason) => {
            if (this.status == STATUS.PENDING) {
                this.status = STATUS.REJECTED;
                this.reason = reason;
            }
        }
        try {
            executor(resolve, reject);
        } catch (e) {
            // 出错走失败逻辑
            reject(e)
        }
    }
    then(onFulfilled, onRejected) {
        if (this.status == STATUS.FUFILLED) {
            onFulfilled(this.value);
        }
        if (this.status == STATUS.REJECTED) {
            onRejected(this.reason);
        }
    }
}

现在我们的 Promise 已经初步实现了，但还有很多问题

一个 promise 可以调用多次 then 方法，也就是说可以注册多个回调，所以我们需要一个队列来保存这些回调。同时我们没有对 pending 状态的 then 方法做处理，当 promise 为 pending 状态时，then 方法应该将回调放入到队列当中，而不是直接运行。所以改进之后的代码如下。

const STATUS = { PENDING: 'PENDING', FUFILLED: 'FUFILLED', REJECTED: 'REJECTED' }
class Promise {
    constructor(executor) {
        this.status = STATUS.PENDING;
        this.value = undefined; // 成过的值
        this.reason = undefined; // 失败的值
+       this.onResolvedCallbacks = []; // 存放成功的回调的 
+       this.onRejectedCallbacks = []; // 存放失败的回调的
        const resolve = (val) => {
            if (this.status == STATUS.PENDING) {
                this.status = STATUS.FUFILLED;
                this.value = val;
                // 成功时调用成功队列里的回调
+                this.onResolvedCallbacks.forEach(fn=>fn());
            }
        }
        const reject = (reason) => {
            if (this.status == STATUS.PENDING) {
                this.status = STATUS.REJECTED;
                this.reason = reason;
                // 失败时调用失败队列里的回调
+               this.onRejectedCallbacks.forEach(fn=>fn());
            }
        }
        try {
            executor(resolve, reject);
        } catch (e) {
            // 出错走失败逻辑
            reject(e)
        }
    }
    then(onFulfilled, onRejected) {
        if (this.status === STATUS.FUFILLED) {
            onFulfilled(this.value);
        }
        if (this.status === STATUS.REJECTED) {
            onRejected(this.reason);
        }
+       if (this.status === STATUS.PENDING) {
+           this.onResolvedCallbacks.push(()=>{ // todo..
+              onFulfilled(this.value);
+           })
+           this.onRejectedCallbacks.push(()=>{ // todo..
+               onRejected(this.reason);
+           })
+       }
+   }
}

到这一个简单 promise 80%的功能已经实现了，但是还有一个问题，promise 可以链式调用，也就是我们常看到的 promise.then().then()。所以我们得在 then 方法里去返回一个新的 promise。

const STATUS = { PENDING: 'PENDING', FUFILLED: 'FUFILLED', REJECTED: 'REJECTED' }
class Promise {
   // 上面逻辑省略
    ...
    then(onFulfilled, onRejected) { // swtich  作用域
+        let promise2 = new Promise((resolve, reject) => {
+            if (this.status === STATUS.FUFILLED) {
+                // to....
+                try {
+                    let x = onFulfilled(this.value);
+                    resolve(x);
+                } catch (e) {
+                    reject(e);
+                }
+            }
+            if (this.status === STATUS.REJECTED) {
+                try {
+                    let x = onRejected(this.reason);
+                    resolve(x);
+                } catch (e) {
+                    reject(e);
+                }
+            }
+            if (this.status === STATUS.PENDING) {
+                this.onResolvedCallbacks.push(() => { // todo..
+                    try {
+                        let x = onFulfilled(this.value);
+                        resolve(x);
+                    } catch (e) {
+                        reject(e);
+                    }
+                })
+                this.onRejectedCallbacks.push(() => { // todo..
+                    try {
+                        let x = onRejected(this.reason);
+                        resolve(x);
+                    } catch (e) {
+                        reject(e);
+                    }
+
+                })
+            }
+        })
+
+        return promise2;
+    }
}

我们注意到我们把回调的执行逻辑都放到了 promise2 的内部，之所以这样做，是因为我们需要用 onFufilled 的返回值去 resolve promise2，这也是为什么 then 回调的返回值会传给下一个 then 的原因。

完整版

上面的 promise 与规范有一些差距

  1. then 注册的回调都是异步执行的
  2. 如果 then 注册回调的返回值是个函数或对象，这里处理起来会复杂一点，我们先看看规范是怎么定义的

promise2 = promise1.then(onFulfilled, onRejected); x = onFulfilled 或 onRejected 的返回值

2.3.1 如果promise和x引用同一个对象，则用TypeError作为原因拒绝（reject）promise。

2.3.2 如果x是一个promise,采用promise的状态

  • 2.3.2.1 如果x是请求状态(pending),promise必须保持pending直到xfulfilled或rejected
  • 2.3.2.2 如果x是完成态(fulfilled)，用相同的值完成fulfillpromise
  • 2.3.2.2 如果x是拒绝态(rejected)，用相同的原因rejectpromise

2.3.3另外，如果x是个对象或者方法

  • 2.3.3.1 让x作为x.then.
  • 2.3.3.2 如果取回的x.then属性的结果为一个异常e,用e作为原因reject promise
  • 2.3.3.3 如果then是一个方法，把x当作this来调用它，第一个参数为resolvePromise，第二个参数为rejectPromise,其中:
  • 2.3.3.3.1 如果/当 resolvePromise 被一个值 y 调用，运行 [[Resolve]](promise, y)
  • 2.3.3.3.2 如果/当 rejectPromise 被一个原因 r 调用，用 r 拒绝（reject）promise
  • 2.3.3.3.3 如果 resolvePromise 和 rejectPromise 都被调用，或者对同一个参数进行多次调用，第一次调用执行，任何进一步的调用都被忽略
  • 2.3.3.3.4 如果调用 then 抛出一个异常 e
  • 2.3.3.3.4.1 如果 resolvePromise 或 rejectPromise 已被调用，忽略。
  • 2.3.3.3.4.2 或者， 用 e 作为reason拒绝（reject）promise

规范可能有点复杂，需要自己慢慢消化，这里我直接把代码贴出来，我会在代码里标注每个规范的实现点。

const STATUS = { PENDING: 'PENDING', FUFILLED: 'FUFILLED', REJECTED: 'REJECTED' }

// 我们的promise 按照规范来写 就可以和别人的promise公用
function resolvePromise(x, promise2, resolve, reject) {
    // 规范 2.3.1
    if (promise2 == x) { // 防止自己等待自己完成
        return reject(new TypeError('出错了'))
    }
    // 规范 2.3.3
    if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
        // x可以是一个对象 或者是函数
        let called;
        try {
            // 规范 2.3.3.1
            let then = x.then;
            if (typeof then == 'function') {
                // 2.3.3.3
                then.call(x, function(y) {
                    // 规范 2.3.3.3.3
                    if (called) return
                    called = true;
                    // 规范 2.3.3.3.1
                    resolvePromise(y, promise2, resolve, reject);
                }, function(r) {
                    // 规范 2.3.3.3.3
                    if (called) return
                    called = true;
                    // 规范 2.3.3.3.2
                    reject(r);
                })
            } else {
                resolve(x); // 此时x 就是一个普通对象
            }
        } catch (e) {
            // 规范 2.3.3.3.4.1
            if (called) return
            called = true;
            // 规范 2.3.3.3.4 
            reject(e); // 取then时抛出错误了
        }
    } else {
        resolve(x); // x是一个原始数据类型 不能是promise
    }
    // 不是proimise 直接就调用resolve
}
class Promise {
    constructor(executor) {
        this.status = STATUS.PENDING;
        this.value = undefined;
        this.reason = undefined;
        this.onResolvedCallbacks = []; // 存放成功的回调的 
        this.onRejectedCallbacks = []; // 存放失败的回调的
        const resolve = (val) => {
            if(val instanceof Promise){ // 是promise 就继续递归解析
                return val.then(resolve,reject)
            }

            if (this.status == STATUS.PENDING) {
                this.status = STATUS.FUFILLED;
                this.value = val;
                // 发布
                this.onResolvedCallbacks.forEach(fn => fn());
            }
        }
        const reject = (reason) => {
            if (this.status == STATUS.PENDING) {
                this.status = STATUS.REJECTED;
                this.reason = reason;
                // 腹部
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }
        try {
            executor(resolve, reject);
        } catch (e) {
            // 出错走失败逻辑
            reject(e)
        }
    }
    then(onFulfilled, onRejected) { // swtich  作用域
        // 可选参数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
        onRejected = typeof onRejected === 'function'? onRejected: err=> {throw err}
        let promise2 = new Promise((resolve, reject) => {
            if (this.status === STATUS.FUFILLED) {
                // to....
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(x, promise2, resolve, reject)
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === STATUS.REJECTED) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason);
                        resolvePromise(x, promise2, resolve, reject)
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === STATUS.PENDING) {
                // 装饰模式 切片编程
                this.onResolvedCallbacks.push(() => { // todo..
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(x, promise2, resolve, reject)
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);
                })
                this.onRejectedCallbacks.push(() => { // todo..
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolvePromise(x, promise2, resolve, reject)
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);

                })
            }
        });
        return promise2;
    }
}

测试工具

给大家推荐一个测试 promise 是否规范的工具 --- promises-aplus-tests，使用方法如下

全局安装 promises-aplus-tests，然后添加以下代码

Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise((resolve,reject)=>{
        dfd.resolve = resolve;
        dfd.reject = reject
    })
    return dfd;
}
module.exports = Promise

然后直接在在控制台运行 promises-aplus-tests <当前 promise>

可以看到我们的 promise 是顺利通过测试的。

总结

希望这篇文章可以帮助大家更深入的理解 promise

码字不易，期望得到你的赞。

本人会长期发布关于原理解读方面的文章，如果想深入了解 js 原生，框架底层的话可以关注我呀~~~

相关推荐

GANs为何引爆机器学习?这篇基于TensorFlow的实例教程为你解惑!

「机器人圈导览」：生成对抗网络无疑是机器学习领域近三年来最火爆的研究领域，相关论文层出不求，各种领域的应用层出不穷。那么，GAN到底如何实践？本文编译自Medium，该文作者以一朵玫瑰花为例，详细阐...

高丽大学等机构联合发布StarGAN:可自定义表情和面部特征

原文来源：arXiv、GitHub作者：YunjeyChoi、MinjeChoi、MunyoungKim、Jung-WooHa、SungKim、JaegulChoo「雷克世界」编译：嗯~...

TensorFlow和PyTorch相继发布最新版，有何变化

原文来源：GitHub「机器人圈」编译：嗯~阿童木呀、多啦A亮Tensorflow主要特征和改进在Tensorflow库中添加封装评估量。所添加的评估量列表如下：1.深度神经网络分类器（DNNCl...

「2022 年」崔庆才 Python3 爬虫教程 - 深度学习识别滑动验证码缺口

上一节我们使用OpenCV识别了图形验证码躯壳欧。这时候就有朋友可能会说了，现在深度学习不是对图像识别很准吗？那深度学习可以用在识别滑动验证码缺口位置吗？当然也是可以的，本节我们就来了解下使用深度...

20K star!搞定 LLM 微调的开源利器

LLM（大语言模型）微调一直都是老大难问题，不仅因为微调需要大量的计算资源，而且微调的方法也很多，要去尝试每种方法的效果，需要安装大量的第三方库和依赖，甚至要接入一些框架，可能在还没开始微调就已经因为...

大模型DeepSeek本地部署后如何进行自定义调整?

1.理解模型架构a)查看深度求索官方文档或提供的源代码文件，了解模型的结构、输入输出格式以及支持的功能。模型是否为预训练权重？如果是，可以在预训练的基础上进行微调（Fine-tuning）。是否需要...

因配置不当，约5000个AI模型与数据集在公网暴露

除了可访问机器学习模型外，暴露的数据还可能包括训练数据集、超参数，甚至是用于构建模型的原始数据。前情回顾·人工智能安全动态向ChatGPT植入恶意“长期记忆”，持续窃取用户输入数据多模态大语言模型的致...

基于pytorch的深度学习人员重识别

基于pytorch的深度学习人员重识别Torchreid是一个库。基于pytorch的深度学习人员重识别。特点：支持多GPU训练支持图像的人员重识别与视频的人员重识别端到端的训练与评估简单的re...

DeepSeek本地部署:轻松训练你的AI模型

引言：为什么选择本地部署？在AI技术飞速发展的今天，越来越多的企业和个人希望将AI技术应用于实际场景中。然而，对于一些对数据隐私和计算资源有特殊需求的用户来说，云端部署可能并不是最佳选择。此时，本地部...

谷歌今天又开源了，这次是Sketch-RNN

前不久，谷歌公布了一项最新技术，可以教机器画画。今天，谷歌开源了代码。在我们研究其代码之前，首先先按要求设置Magenta环境。（https://github.com/tensorflow/magen...

Tensorflow 使用预训练模型训练的完整流程

前面已经介绍了深度学习框架Tensorflow的图像的标注和训练数据的准备工作，本文介绍一下使用预训练模型完成训练并导出训练的模型。1.选择预训练模型1.1下载预训练模型首先需要在Tensorf...

30天大模型调优学习计划（30分钟训练大模型）

30天大模型调优学习计划，结合Unsloth和Lora进行大模型微调，掌握大模型基础知识和调优方法，熟练应用。第1周：基础入门目标：了解大模型基础并熟悉Unsloth等工具的基本使用。Day1：大模...

python爬取喜马拉雅音频，json参数解析

一.抓包分析json，获取加密方式1.抓包获取音频界面f12打开抓包工具，播放一个（非vip）视频，点击“媒体”单击打开可以复制URL，发现就是我们要的音频。复制“CKwRIJEEXn-cABa0Tg...

五、JSONPath使用(Python)（json数据python）

1.安装方法pipinstalljsonpath2.jsonpath与Xpath下面表格是jsonpath语法与Xpath的完整概述和比较。Xpathjsonpath概述/$根节点.@当前节点...

Python网络爬虫的时候json=就是让你少写个json.dumps()

大家好，我是皮皮。一、前言前几天在Python白银交流群【空翼】问了一个Python网络爬虫的问题，提问截图如下：登录请求地址是这个：二、实现过程这里【甯同学】给了一个提示，如下所示：估计很多小伙伴和...

一周热门
最近发表
标签列表