根据Promise/A+ 规范简单实现一个Promise

最新推荐文章于 2025-05-12 15:46:51 发布
最新推荐文章于 2025-05-12 15:46:51 发布
阅读量491 收藏 11
点赞数 23
CC 4.0 BY-SA版权
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenlmw/article/details/145833057

theme: smartblue

根据Promise/A+ 规范简单实现一个Promise

最近在复习准备面试，重温了一下Promise实现，简单说说我自己的一个实现思路

1. Promise/A+ 规范

这里只列举一些比较核心的

  • promise状态必须是这三个状态中的一种：等待态pending，解决态fulfilled或拒绝态rejected

  • promise状态是不可逆的，状态的变更是单向的，只能从Pending -> Fulfilled 或 Pending -> Rejected

  • Promise必须提供一个then方法来访问当前或最终的值或原因。

    Promise的then方法接受俩个参数：

    promise.then(onFulfilled, onRejected)
  • 如果onFulfilled不是一个函数，它必须被忽略，如果onRejected不是一个函数，它必须被忽略
  • then方法返回一个promise，then 方法可以被同一个 promise 调用多次。

2. 原生Promise使用思路

//创建一个Promise
let promise = new Promise((resolve, reject)=>{
    resolve('result');
});
​
promise.then(
    result => console.log(result),
    err => console.log(err)
);

根据上面代码，我们分析一下：

  • Promise是new出来的，说明它是一个构造函数
  • Promise可接收一个函数，函数在new Promise()时立即执行
  • 函数参数为resolve和reject，代表成功/失败方法
  • then()方法可传入收集成功/失败回调，并且根据Promise/A+ 规范，它可返回一个Promise，可链式调用

3. 根据思路实现Promise

根据上面思路，我们一步步去进行实现

1. 使用class实现，实现传入方法并执行
//实现Promise
class NewPromise {
    constructor(fn) {
        this.result = null;     //定义result存储传入值
        //传入方法直接执行
        fn(this.resolve, this.reject);
    }
    //定义成功失败方法，需注意使用箭头函数写法，this指向对象内部
    resolve = (result) => {
        this.result = result;   //接收传入值
    }
    reject = (result) => {
        this.result = result;
    }
}
2. 根据Promise/A+ 规范，定义状态值
//实现Promise
class NewPromise {
    //定义Promise状态值
    static PENDING = '待定'; static FULFILLED = '解决'; static REJECTED = '拒绝';
    constructor(fn) {
        this.result = null;                 //定义result存储传入值
        this.status = NewPromise.PENDING;   //定义初始化状态，初始化状态为待定
        //传入方法直接执行
        fn(this.resolve, this.reject);
    }
    //定义成功失败方法，需注意使用箭头函数写法，this指向对象内部
    resolve = (result) => {
        //状态是单向且不可逆的，所以如果判断不为待定态则return
        if (this.status !== NewPromise.PENDING) return;
        this.status = NewPromise.FULFILLED;     //改变状态为对应状态
        this.result = result;                   //接收传入值
    }
    reject = (result) => {
        if (this.status !== NewPromise.PENDING) return;
        this.status = NewPromise.REJECTED;
        this.result = result;
    }
}
3. 实现then方法
//实现Promise
class NewPromise {
    ...
​
    then = (onResolve, onReject) => {
        //根据状态使用对应方法
        switch (this.status) {
            case NewPromise.FULFILLED:
                onResolve(this.result);
                break;
            case NewPromise.REJECTED:
                onReject(this.result);
                break;
        }
    }
}

这时候我们测试一下代码

//简单测试一下
let promise = new NewPromise((resolve, reject) => {
    resolve('result');
});
​
promise.then(
    result => console.log(result),
    err => console.log(err)
);                      //输出了result，结果比较正常
​
//但是我们换种写法
let promise = new NewPromise((resolve, reject) => {
    console.log('第一步');
    resolve('第二步');
});
​
promise.then(
    result => console.log(result),
    err => console.log(err)
);
​
console.log('第三步');      //输出结果为  第一步   第二步   第三步
​
//我们测试下原生Promise的
let promise = new Promise((resolve, reject) => {
    console.log('第一步');
    resolve('第二步');
});
​
promise.then(
    result => console.log(result),
    err => console.log(err)
);
​
console.log('第三步');      //输出结果为  第一步   第三步   第二步

从测试发现，我们的输出结果与原生Promise有所不同，问题很简单，then是微任务，需要异步执行，我们二话不说，直接给then里面回调方法加上setTimeout

//实现Promise
class NewPromise {
    ...
    
    then = (onResolve, onReject) => {
        //根据状态使用对应方法
        switch (this.status) {
            case NewPromise.FULFILLED:
                setTimeout(() => {
                    onResolve(this.result);
                });
                break;
            case NewPromise.REJECTED:
                setTimeout(() => {
                    onReject(this.result);
                });
                break;
        }
    }
}

这时候的测试结果就正常了，但是问题其实还没有解决，我们再举个例子，在resolve外层包裹个setTimeout，使得resolve异步执行

let promise = new NewPromise((resolve, reject) => {
    console.log('第一步');
    setTimeout(() => {
        resolve('第二步');
    });
});
​
promise.then(
    result => console.log(result),
    err => console.log(err)
);
​
console.log('第三步');      //输出结果为  第一步   第三步，缺少了第二步

代码执行到then的时候出现了问题，并没有输出第二步，我们调试代码就会发现，当resolve变成异步时，执行到then时Promise为PENDING状态，而我们then方法里面并没有对于PENDING状态的处理，所以我们需要在then里面去添加一个PENDING状态处理，但是我们要考虑以下几点：

  • then在PENDING状态下，因为resolve与reject都没有触发过，所以没有获取到result值
  • 将then里面的onResolve、onReject存储起来，待resolve、reject执行后再执行

考虑完这几个点后，我们进行实现

//实现Promise
class NewPromise {
    //定义Promise状态值
    static PENDING = '待定'; static FULFILLED = '解决'; static REJECTED = '拒绝';
    constructor(fn) {
        this.result = null;                 //定义result存储传入值
        this.status = NewPromise.PENDING;   //定义初始化状态，初始化状态为待定
        //创建成功/失败数组存储成功/失败回调
        this.resolveCallback = [];
        this.rejectCallback = [];
        //传入方法直接执行
        fn(this.resolve, this.reject);
    }
    //定义成功失败方法，需注意使用箭头函数写法，this指向对象内部
    resolve = (result) => {
        //添加定时器，确保resolve是在事件循环末尾执行
        setTimeout(() => {
            //状态是单向且不可逆的，所以如果判断不为待定态则return
            if (this.status !== NewPromise.PENDING) return;
            this.status = NewPromise.FULFILLED;     //改变状态为对应状态
            this.result = result;                   //接收传入值
            this.resolveCallback.forEach(callback => {
                callback(result);
            })
        });
    }
    reject = (result) => {
        setTimeout(() => {
            if (this.status !== NewPromise.PENDING) return;
            this.status = NewPromise.REJECTED;
            this.result = result;
            this.rejectCallback.forEach(callback => {
                callback(result);
            })
        });
    }
​
    then = (onResolve, onReject) => {
        //根据状态使用对应方法
        switch (this.status) {
            case NewPromise.PENDING:    //添加待定状态处理，存储成功失败回调
                this.resolveCallback.push(onResolve);
                this.rejectCallback.push(onReject);
                break;
            case NewPromise.FULFILLED:
                setTimeout(() => {
                    onResolve(this.result);
                });
                break;
            case NewPromise.REJECTED:
                setTimeout(() => {
                    onReject(this.result);
                });
                break;
        }
    }
}
4. .then()链式调用

根据Promise/A+ 规范，.then()需要返回一个Promise，并且.then()需要拿到上一个.then()的返回值，我们按照这个思路简单实现一下

//实现Promise
class NewPromise {
    ...
​
    then = (onResolve, onReject) => {
        return new NewPromise((resolve, reject) => {        //返回一个Promise
            // 简单处理下成功/失败回调
            const resolveFn = res => {
                const x = onResolve(res);   //执行当前Promise的成功回调，获取返回值
                resolve(x);                 //执行resolve，下一个then就能获取到x值
            }
            const rejectFn = err => {
                const x = onReject(err);    //执行当前Promise的成功回调，获取返回值
                resolve(x);                 //执行resolve，下一个then就能获取到x值
            }
            //根据状态使用对应方法
            switch (this.status) {
                case NewPromise.PENDING:    //添加待定状态处理，存储成功失败回调
                    this.resolveCallback.push(resolveFn);
                    this.rejectCallback.push(rejectFn);
                    break;
                case NewPromise.FULFILLED:
                    setTimeout(() => {
                        onResolve(this.result);
                    });
                    break;
                case NewPromise.REJECTED:
                    setTimeout(() => {
                        onReject(this.result);
                    });
                    break;
            }
        })
    }
}

上面我们简单实现了链式调用，但是考虑得还不够前面，成功/失败的x值不为Promise对象时，才能直接使用用resolve，如果x的值为应该Promise对象，我们需要判断它的成功/失败状态去调用对应的方法

//实现Promise
class NewPromise {
    ...
​
    then = (onResolve, onReject) => {
        return new NewPromise((resolve, reject) => {        //返回一个Promise
            // 简单处理下成功/失败回调，同时继续报错处理
            const resolveFn = res => {
                try {
                    const x = onResolve(res);   //执行当前Promise的成功回调，获取返回值
                    //这里进行原型判断，如果x为Promise对象，则进行then操作，根据Promise状态进行成功/失败处理，否则直接使用resolve
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            const rejectFn = err => {
                try {
                    const x = onReject(err);
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            //根据状态使用对应方法
            switch (this.status) {
                case NewPromise.PENDING:    //添加待定状态处理，存储成功失败回调
                    this.resolveCallback.push(resolveFn);
                    this.rejectCallback.push(rejectFn);
                    break;
                case NewPromise.FULFILLED:
                    setTimeout(() => {
                        onResolve(this.result);
                    });
                    break;
                case NewPromise.REJECTED:
                    setTimeout(() => {
                        onReject(this.result);
                    });
                    break;
            }
        })
    }
}
5. 值穿透处理

根据规范，如果 .then() 接收的参数不是function，那么我们应该忽略它。如果没有忽略，当.then()回调不为function时将会抛出异常，导致链式调用中断

//实现Promise
class NewPromise {
    ...
​
    then = (onResolve, onReject) => {
        // 根据规范，如果then的参数不是function，则我们需要忽略它, 让链式调用继续往下执行
        typeof onResolve !== 'function' ? onResolve = value => value : null;
        typeof onReject !== 'function' ? onReject = reason => {
            throw new Error(reason instanceof Error ? reason.message : reason);
        } : null;
​
        return new NewPromise((resolve, reject) => {        //返回一个Promise
            // 简单处理下成功/失败回调，同时继续报错处理
            const resolveFn = res => {
                try {
                    const x = onResolve(res);   //执行当前Promise的成功回调，获取返回值
                    //这里进行原型判断，如果x为Promise对象，则进行then操作，根据Promise状态进行成功/失败处理，否则直接使用resolve
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            const rejectFn = err => {
                try {
                    const x = onReject(err); 
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            //根据状态使用对应方法
            switch (this.status) {
                case NewPromise.PENDING:    //添加待定状态处理，存储成功失败回调
                    this.resolveCallback.push(resolveFn);
                    this.rejectCallback.push(rejectFn);
                    break;
                case NewPromise.FULFILLED:
                    setTimeout(() => {
                        onResolve(this.result);
                    });
                    break;
                case NewPromise.REJECTED:
                    setTimeout(() => {
                        onReject(this.result);
                    });
                    break;
            }
        })
    }
}

完整代码

//实现Promise
class NewPromise {
    //定义Promise状态值
    static PENDING = '待定'; static FULFILLED = '解决'; static REJECTED = '拒绝';
    constructor(fn) {
        this.result = null;                 //定义result存储传入值
        this.status = NewPromise.PENDING;   //定义初始化状态，初始化状态为待定
        //创建成功/失败数组存储成功/失败回调
        this.resolveCallback = [];
        this.rejectCallback = [];
        //传入方法直接执行
        fn(this.resolve, this.reject);
    }
    //定义成功失败方法，需注意使用箭头函数写法，this指向对象内部
    resolve = (result) => {
        //添加定时器，确保resolve是在事件循环末尾执行
        setTimeout(() => {
            //状态是单向且不可逆的，所以如果判断不为待定态则return
            if (this.status !== NewPromise.PENDING) return;
            this.status = NewPromise.FULFILLED;     //改变状态为对应状态
            this.result = result;                   //接收传入值
            this.resolveCallback.forEach(callback => {
                callback(result);
            })
        });
    }
    reject = (result) => {
        setTimeout(() => {
            if (this.status !== NewPromise.PENDING) return;
            this.status = NewPromise.REJECTED;
            this.result = result;
            this.rejectCallback.forEach(callback => {
                callback(result);
            })
        });
    }
​
    then = (onResolve, onReject) => {
        // 根据规范，如果then的参数不是function，则我们需要忽略它, 让链式调用继续往下执行
        typeof onResolve !== 'function' ? onResolve = value => value : null;
        typeof onReject !== 'function' ? onReject = reason => {
            throw new Error(reason instanceof Error ? reason.message : reason);
        } : null;
​
        return new NewPromise((resolve, reject) => {        //返回一个Promise
            // 简单处理下成功/失败回调，同时继续报错处理
            const resolveFn = res => {
                try {
                    const x = onResolve(res);   //执行当前Promise的成功回调，获取返回值
                    //这里进行原型判断，如果x为Promise对象，则进行then操作，根据Promise状态进行成功/失败处理，否则直接使用resolve
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            const rejectFn = err => {
                try {
                    const x = onReject(err);
                    x instanceof NewPromise ? x.then(resolve, reject) : resolve(x);
                } catch (e) {
                    reject(e);
                }
            }
            //根据状态使用对应方法
            switch (this.status) {
                case NewPromise.PENDING:    //添加待定状态处理，存储成功失败回调
                    this.resolveCallback.push(resolveFn);
                    this.rejectCallback.push(rejectFn);
                    break;
                case NewPromise.FULFILLED:
                    setTimeout(() => {
                        onResolve(this.result);
                    });
                    break;
                case NewPromise.REJECTED:
                    setTimeout(() => {
                        onReject(this.result);
                    });
                    break;
            }
        })
    }
}

上面只是实现了Promise的一个基本功能，要扩展别的功能其实知道原理的话，很容易实现，比如.catch()

//实现Promise
class NewPromise {
    ...
​
    catch = (reject) => {
        return this.then(undefined, reject);
    }
}

把原理弄懂弄透的话，手写出Promise其实很简单

推荐文章

PromiseA+规范
ChenLingZhi1115的博客
08-16 1212
5.1 promise状态变成 fulfilled 后，所有的 onFulfilled 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onFulfilled的回调)catch 的回调里, 打印promise的时候, 整个回调还并没有执行完成(所以此时的状态是pending), 只有当整个回调完成了, 才会更改状态 ==> 第一次打印test时。所以待会实现代码的时候, 同学们注意一下resolvePromise函数具体的实现, 结合代码来看会好很多.
Promises/A+规范
每天都要努力学习哦~~
11-23 1141
同时，规范还定义了一些其他的行为，比如then方法可以多次调用同一个Promise，如果回调函数返回一个值，则会运行Promise解析过程来处理返回值，如果回调函数抛出异常，则Promise会被拒绝。但是，如果你的Promise库具有创建已解决或已拒绝Promise的能力，那么你应该包含这些导出项，以便测试运行器可以提供更好的代码覆盖率，并发现这些方法中的任何错误。与Promise交互的主要方式是通过其then方法，该方法注册回调函数以接收Promise的最终值或无法实现Promise的原因。
Node.js系列--Promise规范解读
Closure 专栏
01-12 799
Promise表示一个异步操作的最终结果。与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因。 1. 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包
Promise/A+ 规范中文解读
最新发布
懒羊羊我小弟的博客
05-12 1018
Promise/A + 是 JavaScript Promise 标准，旨在定义then方法行为以确保互操作性。文档介绍了 Promise、Thenable 等术语，阐述 Promise 的状态、then方法及解决过程等核心规范，还提及注释与实现细节，指出规范通过标准化then方法，提供可预测行为模型，确保不同实现的互操作性，为开发者构建异步处理机制提供参考。
promise学习笔记
菜鸟前端的博客
06-10 168
第一部分 Promise A+ 规范 术语 promise 有then 方法的对象或者函数 thenable 是一个有then方法的对象或者是函数 value promise 状态成功时的值， resolve（value), string number boolean undefined thenable promise reason promise 状态失败时的值， reject(reason） exception 使用throw 抛出的异常 规范 Promise States 有三种状态，
Promise.js符合promise/A+ 规范
09-17
手写promise/A+ 规范实现
手写一个Promise/A+,完美通过官方872个测试用例
01-08
前段时间我用两篇文章深入讲解了异步的概念和Event Loop的底层原理，然后还讲了一种自己实现异步的...所以本文会自己实现一个遵循Promise/A+规范的Promise。实现之后，我们还要用Promise/A+官方的测试工具来测试下我
实现Promise/A+规范的ES6兼容Promise库
'modulex-promise' 是一个实现了 Promise/A+ 规范的模块，允许开发者在代码中使用 Promise 对象。 - `readFilePromisified('config.json')` `readFilePromisified` 函数很可能是封装了 `fs.readFile` 的 Promise ...
手写Promise：实现符合PromisesA+规范的Promise
dfc_dfc的博客
09-01 1220
手写Promise：实现符合PromiseA+规范的Promise
Promise A+ 规范
weixin_55541470的博客
12-20 480
如果一个 Promise 实现符合 Promise A+ 规范，那么它可以与其他符合该规范的 Promise 实现进行互操作，可以方便地进行 Promise 链式调用、错误处理等操作，使得异步代码更加清晰和可维护。Promise A+ 规范是关于 JavaScript Promise 实现的一种标准规范，旨在统一不同 Promise 库之间的行为，确保其在使用上的一致性和可互操作性。如果在 then方法中返回了一个新的 Promise，那么后续的 then 方法将会等待这个新的 Promise 完成。
Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
weixin_34199405的博客
03-13 213
1.什么是Promise? Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/订阅（深入了解发布/订阅，可以看我的文章用发布订阅模式编写一个可被其他对象拓展复用的自定义事件系统） Promise对象 这里就拿回调函数说说 (1) 对于回调函数 我们用Jquery的aja...
Promise/A+规范
Relax的博客
09-28 258
Promise/A+规范 规范出现原因 我们不知道异步请求什么时候返回数据，所以我们就需要写回调函数。但是某些情况下我们需要知道数据是神魔时候返回的，然后进行一些处理。 当我们在异步回调里面处理的操作还是异步操作的时候这样就会形成异步嵌套，有时候这种会出现时序处理错误。 $http.get('localhost:8080').success(function(){ setTimenout(funt
PromiseA+规范及手写Promise
luo_qianyu的博客
10-11 529
PromiseA+规范及手写Promise promise的状态 一个promise有三种状态：等待态（Pending）、执行态（Fullfilled）、拒绝态（Rejected），初始的状态为Pending，可以变更为剩下两种状态种的其中一种，但一旦变更之后，不可再次改变状态 满足A+规范三种状态的情况并状态变更只以第一次为准： class FackPromise{ // 定义初始状态 private promiseState:string="Pending"; // 定义初始返回
PromiseA+规范之手写Promise
程邓楠的博客
11-04 4167
@[TOC](文章目录) 前言 1、Promise 的意义？ 在javascript的世界中，所有代码都是单线程执行的，由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。Ajax可以解决这个问题，但是并不好复用。JQuery的链式调用同样可以解决，每次调用都会返回一个JQuery对象。为了更好的处理Promise 出现了，并且ECMAScript 对其进行了规范。 2、PromiseA+规范是什么？ 其实Promise规范有很多，如Promise/A，...
Promise A+ 规范（译）
kart jim的优快云博客
08-28 441
javascript promise官方规范
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值