手动实现Promise/A+（一）：实现 then 方法

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

promise 如今已经深度融入前端开发技术当中，很多模块内部都依赖 promise，使用 promise 可以很好的解决异步回调问题。

promise 内部有三种状态：预备态（pending）、成功态（fulfilled）和失败态（rejected）。初始状态是 pending，当操作完成时会变成成功态，如果操作出现异常而终止时它会变成失败状态（或拒绝态）。一旦 promise 被履行或者被拒绝，它就不可逆转，即不能从成功态再变回其他状态，状态之间不能再相互转换。此时的 promise 可以认为是完成状态（settled）。

then 函数是 promise 中最常用的一个方法，它也是 promise 的核心 API。例如：

let p = new Promise((resolve, reject) => {
    resolve(123);
});
p.then(d => {
    console.log(d);
}, e => {
    console.log(e);
});

当执行上面代码后，将会履行成功态，执行 then 方法的第一个回调函数，打印出 123。
Promise 构造函数接收一个 exector 函数，当构造实例时，这个函数会 立即执行。下面一个初级版的 promise 实现。

const PENDING = 1;	// 等待状态
const FULFILLED = 2;	// 成功态
const REJECTED = 3;		// 失败态

class Promise{
    constructor (exector) {
        // 初始状态是 等待态
        this.status = PENDING;
        // 成功时的值
        this.value = undefined;
        // 失败时的值
        this.reason = undefined;
        const resolve = (value)  =>{
            // 用户在调用 resolve 函数后，就要改变状态
            // 如果状态是初始态，才改变，因为状态之间不可逆转
            // resolve 函数不能调用多次，reject 函数也是一样
            if (this.status === PENDING) {
                this.status = FULFILLED;
                this.value = value;
            }
        }
        const reject = (reason) => {
            if (this.status === PENDING) {
                this.status = REJECTED;
                this.reason = reason;
            }
        }

        try {
            // 立即调用，调用 exector 可能会出错
            exector(resolve, reject);
        } catch (error) {
            // 把异常传给 reject 失败函数
            reject(error);
        }
    }
	// then 方法接收两个回调函数，一个是成功的回调，一个是失败的回调
    then (onFulfilled, onRejected) {
        // 当状态转变时，就调用传入的状态函数
        if (this.status === FULFILLED) {
            onFulfilled(this.value);
        }
        if (this.status === REJECTED) {
            onRejected(this.reason);
        }
    }
}

上面的实现比较简单，我们知道，实际当中的 then 函数非常强大，可以链式调用，当前的返回值可以作为下一个 then 的接收值，而且 promsie 主要是为了解决异步回调问题。比如下面的例子：

var fn = function (num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 大约1秒后把参数传给成功函数
            resolve(num);
        },1000);
    });
}
fn(1000).then(data => {
    return data + 111;  // 返回 1111
}).then(data => {       // data 是上一次 then 的返回值
    console.log('data === ',data);  // 1111
}, e => {
    console.log('error === ',e);
});

显然，我们刚刚实现的 promise 不能链式调用，也不能正确处理异步回调，我们的 then 方法是同步的代码，用户在异步的情况下使用 resolve 或者 reject 函数，在调用 then 方法时，resolve 或 reject 函数还没有执行（或者说定时器等异步函数还没有执行），status 就还没有改变，但 then 方法已经执行完了（状态并没有命中），这就导致没有接收到结果。

处理异步代码

通过上面分析，了解到，调用 then 时，this.status 可能还是 PENDING 状态，说明是异步函数在使用 promise。为了解决这个问题，我们可以使用两个数组，分别用来存储失败和成功的回调，当 status 变化时，value 或 reason 也会跟着变化（这两个变量都在 resolve 或 reject 函数中改变），这时就遍历数组，执行函数。代码如下：

class Promise{
    constructor (exector) {
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;
        // 成功的回调数组
        this.onResolvedCbs = [];
        // 失败的回调数组
        this.onRejectedCbs = [];
        // 失败时的回调
        var reject = (reason) => {
            if(this.status === PENDING){
                this.status = REJECTED; // 状态变化了
                this.reason = reason;   // 值变化了
                // 执行 then 中的回调，这时回调函数的参数中就能拿到值了
                this.onRejectedCbs.forEach(fn => fn());
            }
        };
        var resolve = (value) => {
            if(this.status === PENDING){
                this.status = FULFILLED;    // 状态变化了
                this.value = value;         // 值变化了
                // 执行 then 中的回调，这时回调函数的参数中就能拿到值了
                this.onResolvedCbs.forEach(fn => fn());
            }
        };
        try{
            exector(resolve, reject);
        }catch(e){
            reject(e);
        }
    }
    then (onFulfilled, onRejected) {
        if(this.status === FULFILLED){
            onFulfilled(this.value);
        }
        if(this.status === REJECTED){
            onRejected(this.value);
        }
        if(this.status === PENDING){
            // 异步，就先不执行函数，先把函数存储到数组中
            // 当 status 变化后，再遍历数组，执行函数
            // 在定时器里调用了 resolve 或者 reject
            this.onResolvedCbs.push(() => {
                onFulfilled(this.value);
            });
            this.onRejectedCbs.push(() => {
                onRejected(this.reason);
            });
        }
    }
}

链式调用

链式调用可以说是 Promise 的精华，有了链式调用，你的代码中基本就不会再有回调地狱了！

在 Promise 中，上一次 then 方法返回的值会作为下一次 then 方法的回调中的参数。then 方法返回的值有三种：

  1. 在成功回调或者失败回调中抛出异常，会走到下一次 then 的失败回调里；
  2. 成功或失败返回的是还是一个 promise，那么会用这个 （返回的）promise 的状态作为结果；
  3. 普通值。即除了上面两种之外的值，promise 会把这个值传递给外层的下一个 then 方法中。

下面代码是第一种情况的演示：

// 在成功回调或者失败回调中抛出异常，会走到下一次 `then` 的失败回调里；
var p = function(num){
    return new Promise(resolve => {
        // 这里如果是调用 reject
        // 会触发第一个 then 中的失败回调
        // 如果失败回调中抛出异常，错误会传递到第二个 then 方法的失败回调中
        resolve(num);
    });
}
p(4).then(n => {
    throw Error('出错了！' + n);
},e => {
    console.log('e: ', e);
}).then((d) => {
    console.log('d == ', d);
}, err => {     // 错误会走到这个失败回调中
    console.log('err == ', err);
});

下面的代码是情况2 的例子，在 then 方法中返回 promise 实例。

// 成功或失败返回的是还是一个 `promise`，那么会用这个 （返回的）promise 的状态作为结果；
var p = function(num){
    return new Promise((resolve, reject) => {
        resolve(num);
    });
}
p(4).then(n => {
    // then 内部又返回了 promise
    return new Promise((resolve, reject) => {
        resolve(n + 1);     // 调用成功的函数
        // 如果这里调用的 reject 函数，失败的状态会传递到下面 then 方法的失败回调中
    })
}).then((data) => {
    // 在这个 then 中可以接收到 resolve(n + 1) 的数据
    console.log('data === ', data);
},err => console.log('err: ', err));

甚至可以这样使用 promise：

p(4).then(n => {    // n === 4
    return new Promise((resolve, reject) => {
        resolve(n + 1);
    }).then(d => {      // d === 5
        return new Promise((resolve, reject) => {
            resolve(d + 2);
        }).then(d => {      // d === 7
            return new Promise((resolve, reject) => {
                resolve(d + 3);
            });
        }).then(data1 => {      // data1 === 10
            // 这个 then 离 resolve(d + 3) 最近，因此会接收数据
            console.log('data1 === ', data1);   // 10
        });
    }).then(data2 => {      // undefined
        console.log('data2 === ', data2);
    })
}).then((data) => {     // undefined
    console.log('data === ', data);
}, err => {
    console.log('err: ', err);
});

仔细观察上面代码，可能你对 then 方法的执行顺序会有困惑。上面我们已经说过，new Promise 传入的 exector 函数会被立即执行，上面代码中，最上面的 then 在执行时，会立即执行 new Promise，exector 执行完后，最外层的 then 方法还没有执行完，因为内部又调用了 then 方法，直到执行到 resolve(d + 3)处，此时 then(d => xxx) 的代码才执行完，执行完后返回 promsie 实例，又调用了 then 方法（then(data1 => xxx)）,接收到 resolve(d + 3) 传来的值，打印出结果，这个 then 方法之所以能接收到值，是因为它满足了情况2，返回的 promise 是 resolve 态，然后就接收到了。data1这个 then 方法不再返回值，因此它下面的 then 方法打印的结果都是 undefined。

上面代码看起来实在是有些丑陋，在实际工作当中估计也不会这么写，但这能反映出 then 方法的特点，这也是 then 方法的强大之处。错误处理也是这样。如果在失败回调中返回的是一个普通值，该值会传入下一个 then 方法的成功回调里。例如：

var p = function(num){
    return new Promise((resolve, reject) => {
        reject(num);    // 调用失败函数，num 是一个普通值
    });
}
p(4).then(n => {
    
}, e => {
    return e;   // 返回普通值
}).then(d => {  // d === 4
    console.log('d === ', d);
}, err => {
    console.log('err === ', err);
});

then 方法的实现原理：通过返回一个新的 promise 实例来实现链式调用（而不是返回当前的实例）。不能返回当前实例，因为一旦是状态转变，就不可逆转。比如上面的代码，失败回调中返回普通值，结果值会传递到下一个成功回调里，而不是失败回调里，如果 then 方法返回的是当前实例，状态已经是失败态，状态不可逆转，也就不能把失败态变成成功态。当返回的是新的 promsie 实例时，把普通值传入 resolve 中就可以做到状态转变。

重写 then 方法

代码如下：

then (onFulfilled, onRejected) {
    // 两个参数必须是回调函数，不是函数时替换成函数
    // 这样可以实现这种效果：promise.then().then().then(d => console.log(d));
    // 即使中间的 then 函数没有传参，后面的 then 函数也可以获取到值，这被称为“值穿透”
    onFulfilled = typeof onFulfilled === 'function' ?
            onFulfilled : v => v;   // 默认是把参数（this.value）直接返回
        onRejected = typeof onRejected === 'function' ? 
            onRejected : err => { throw err };
     // 创建新的 promise 实例
    let promise2 = new Promise((resolve, reject) => {
        /**
         * 根据 onFulfilled 回调执行后的返回值来判断是调用 resolve 还是 reject
         * onFulfilled 回调可能返回 promise，可能抛出异常，也可能返回的是一个普通值
         */
        if(this.status === FULFILLED){
            setTimeout(() => {
                try{        // 加 try-catch 是因为 onFulfilled 回调可能抛出异常
                    let x = onFulfilled(this.value);
                    resolvePromise(x, promise2, resolve, reject);
                }catch(e){
                    reject(e);
                }
            },0);
        }
        if(this.status === REJECTED){
            setTimeout(() => {
                try{
                    let x = onRejected(this.reason);
                    resolvePromise(x, promise2, resolve, reject);
                }catch(e){
                    reject(e);
                }
            },0);
        }
        if(this.status === PENDING){
            // 异步，就先不执行函数，先把函数存储到数组中
            // 当 status 变化后，在遍历数组，执行函数
            this.onResolvedCbs.push(() => {
                setTimeout(() => {
                    try{        // 加 try-catch 是因为 onFulfilled 回调可能抛出异常
                        let x = onFulfilled(this.value);
                        resolvePromise(x, promise2, resolve, reject);
                    }catch(e){
                        reject(e);
                    }
                },0);
            });
            this.onRejectedCbs.push(() => {
                setTimeout(() => {
                    try{
                        let x = onRejected(this.reason);
                        resolvePromise(x, promise2, resolve, reject);
                    }catch(e){
                        reject(e);
                    }
                },0);
            });
        }
    });
    return promise2;    // 返回 promise 实例，实现链式调用
}

调用 onFulfilled 或者调用 onRejected 函数的地方都加上了定时器和 try-catch 语句，用定时器包裹是因为在 promise2 构造函数内部使用了 promise2 实例，在生成实例期间就想使用实例，显然是拿不到 promise2 实例的，这时就要使用定时器，在下一个事件循环时再运行里面的代码，这样就能拿到实例了。try-catch 语句很明显是为了捕获可能抛出的异常，有异常就传给 reject 函数。如果没有异常，就交给 resolvePromise 函数去处理（普通值或者 promise）。

resolvePromise 函数代码如下：

function resolvePromise(x, promise2, resolve, reject){
    if(x === promise2){     // x 不能与 promise2 相等，不然会造成死循环
        reject(new TypeError('TypeError: Chaining cycle detected for promise #<Promise>'));
    }
    let called;
    // 如果 x 是一个对象，或者是一个方法
    if((typeof x === 'object' && x !== null) || typeof x === 'function'){
        // 带有 then 方法的对象被称为 thenable
        try{        // 防止 then 取不到报错
            let then = x.then;  // 如果能获取到 then 方法，就认为 x 是一个 promise 实例
            if(typeof then === 'function'){
                // 执行 then 方法，将 this 指向 x（x是promise实例）
                then.call(x, y => {
                    if(called)  return;
                    called = true;
                    // y 也有可能是一个 promise，递归调用，直到获得普通值或抛出异常
                    // 这里之所以判断 called 是因为，called 可能会变成 true（至少递归了一次），
                    // called === true，说明 reject 执行了，就终止递归
                    resolvePromise(y, promise2, resolve, reject);
                }, err => {
                    if(called)  return;
                    called = true;
                    reject(err);
                });
            }else{      // 对象或者函数中没有 then 方法，就按照普通值处理
                resolve(x);
            }
        }catch(e){
            if(called)  return;
            called = true;
            reject(e);
        }
    }else{      // x 是一个普通值
        resolve(x);
    }
}

在上面代码中，多次对 called 变量做判断，这是为了防止多次调用，一旦失败就 reject 出去，不再递归调用。

以上就实现了一个 Promise，如果要检测符不符合 Promise/A+ 规范，可以使用 npm 下载 promises-aplus-tests 这个包，写入下面代码：

// Promise 就是你自己封装的 Promise 类
Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd;
}

然后运行下面的代码：

npx promises-aplus-tests promise.js

如果又不符合规范的地方，终端会输出错误信息。关于 Promise/A+ 规范可以参考这个网站： Promise/A+

多云转晴ing
关注
专栏目录
手写简版promise（二）实现.then()方法
qq_39183005的博客
03-12 1260
then方法的用法 let p = new Promise((resolve, reject) => { resolve('success1') }) p.then(res => { console.log(res); // success1 }) 上面代码可以看到then方法接收的是一个回调函数，并且输出resolve中返回的数据，根据这个思路往下写 自己的then方法 export default class MyPromise { constructor(fn) { t
按照 Promise/A+ 规范逐行注释并实现 Promise
Asheng 的前端笔记
04-01 368
现在前端越来越卷，不会手写 Promise 都不好意思面试了。这次我们一起按照 Promise/A+ 规范逐行注释并实现 Promise。
（进阶）手写Promise-then方法（实现1）
次顶级的博客
12-20 360
实现resolve , reject同时调用时，只会执行第一个回调 then时将回调加入微任务，延迟执行，确保拿到then的成功和失败回调后执行
Promise以及手动实现
最新发布
weixin_42683639的博客
08-18 237
Promise原理及实现
Promise的实现 then方法的具体实现（二）
qq_43826085的博客
05-13 709
目录 Promise的实现 then方法的具体实现（二） 一、封装handle方法用于调用指定的回调函数，根据执行的结果改变return的promise的状态 二、根据当前状态执行不同的操作 三、向后传递成功或者失败的数据（完整的then方法） Promise的实现 then方法的具体实现（二） 一、封装handle方法用于调用指定的回调函数，根据执行的结果改变return的promise的状态 如果抛出异常，return的promise就会失败，reason就是error 如果
手撕 Promise（then 链及 Promise 方法实现）
雪急飞绪博客
02-24 611
Promise 了解 Promise Promise 是一个异步操作返回的对象，用来传递异步操作的消息 可以解决的问题 解决回调地狱问题，不会导致难以维护 合并多个异步请求，节约时间 Promise 的三种状态 Pending 等待态 Fulfilled 成功态 Rejected 失败态 使用 Promise Promise.resolve：将现有对象转为 Promise 对象，这个对象处于 resolve 状态 作用： 改状态 发布事件池子里的方法 Promise.resolve([1, 2
Promise（手动实现）
风起
09-25 1075
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
menemize：简化 Promise/A+ 中 Q 的异常处理流程
1. Promise/A+ 规范：Promise/A+ 是一个 JavaScript Promise 实现的规范，它定义了 Promise 的行为和功能，以便不同的 Promise 实现能够兼容。Promise/A+ 规范强调了 promise 的异步特性和错误处理机制，为开发者...
（promise-polyfill）手动实现一个符合Promises/A+规范的promise， 并添加Promise的常用方法
weixin_40870788的博客
01-15 857
/* Promises/A+ specification */ // 1. Terminology // 1.1. “promise” is an object or function with a then method whose behavior conforms to this specification. // 1.2. “thenable” is an object or functi...
深入理解Promise A+规范的实现方法
综上所述，要实现一个符合Promise/A+规范的Promise，需要深入了解JavaScript中的异步编程模式，理解then方法的设计哲学，并在实现中严格遵守规范的要求。同时，还需要编写测试用例验证实现的正确性，并对代码进行...
nodejs中简单实现Javascript Promise机制的实例
10-25
Promise/A+规范是一份为JavaScript中的Promise定义实现的行为规范，该规范由一系列具体的要求和定义组成，比如Promise的三种状态（pending、fulfilled和rejected），以及then方法的行为等。在Node.js中实现这样的...
手写promise-状态设计
秃头小吴
04-12 361
const PROMISE_STATUS_PEDDING = 'pedding' const PROMISE_STATUS_FULFILLED = 'fulfilled' const PROMISE_STATUE_REJECTED = 'rejected' class XYPromise { constructor(executor) { this.status = PROMISE_STATUS_PEDDING this.vaule = undefined .
Promise 原理
淡定如斯的博客
11-05 329
一. Promise规范 要实现一个Promise必须要遵守Promise规范，Promise的规范有很多，Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 中采用了 Promise/A+ 规范。 具体的 Promise/A+ 规范可以跳转这里 Promise的实现 接下来我们就实现一个Promise new Promise((resolve,reject)=>{ setTimeout(()=>{ console.
手动实现 Promise
前端笔记——放弃很容易,但坚持一定很酷
04-26 350
【代码】手动实现 Promise。
手动实现Promise
qq_41709082的博客
03-09 716
实现Promise
手动实现简易的Promise
weixin_38378596的博客
01-10 327
const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this //方便后面利用上下文，先把this赋值给that this.state = PENDING // 初始状态为pending this....
手动实现完整的Promise
kkm486622296的博客
03-02 257
声明：本文是学习珠峰培训视频，模仿实现的对象Promise，通过了 promises-aplus-tests测试，文章最下面有截图。 constPENDING='pending';//初始态 constFULFILLED='fulFilled';//成功态 constREJECTED='rejected';//失败态 functionPromise(e...
promise 的then方法
m0_50122836的博客
05-25 310
关于Promise中then方法的处理。 then(successCallback, failedCallback) { return new Promise((resolve, reject) => { // success是 resolve的值 // 可以看出是从这里将resolve的值传给成功回调的 const x = successCallback(this.success); // 调用successCallback有可能是一个Promise，也可能不是
手动实现一个Promise，简洁明了
Besam-juajua的博客
09-29 381
JS版本中，更新最大的一个版本就是ES6了，包括了const、let、模板字符串、箭头函数、类、Generator、Promise等等一系列语法糖。 在ES7没出来前，Promise是代替传统回调的主要方式，ES7后更多的是使用async-await，但Pomise的使用仍不在少数 本文章，我们一起实现一个Promise，你可能说，我直接用它就行了，干嘛自己写一个。非也，在我看来，理解代码思想...
实现Promise/A+规范的ES6兼容Promise库
'modulex-promise' 是一个实现了 Promise/A+ 规范的模块，允许开发者在代码中使用 Promise 对象。 - `readFilePromisified('config.json')` `readFilePromisified` 函数很可能是封装了 `fs.readFile` 的 Promise ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值