安科网

promise 实现（es6 完整源码）

来斌

来斌

2019-07-01

关注 关注

概览

const PENDING = Symbol('PENDING');
const FULFILLED = Symbol('FULFILLED');
const REJECTED = Symbol('REJECTED');

class MyPromise {
    constructor(fn) {}
    then(successFn, failFn) {}
    catch(failFn) {}
    finally(finalFn){}
    static resolve(val) {}
    static reject(val) {}
    static all(promiseArr) {}
    static race(promiseArr) {}
}

Promise 内部维护着三种状态 pending、fulfilled 和 rejected，状态只能从 pending 转变到 fulfilled，或从 pending 转变到 rejected 且该转变不可逆。

Promise 主要提供了三个实例方法 then，catch，finally，和4个静态方法 resolve，reject，all，race。所有方法都都返回一个Promise对象。

构造函数

constructor(fn) {
        this.fulfilledQueue = [];
        this.rejectedQueue = [];
        this._status = PENDING;
        this._value  = null;

        // 执行成功队列中的回调函数
        const handleFulfilledQueue = () => {
            while(this.fulfilledQueue.length) {
                let fulfiledFn = this.fulfilledQueue.shift();
                fulfiledFn(this._value);
            };
        };
        
        // 执行失败队列中的回调函数
        const handleRejectedQueue = () => {
            while(this.rejectedQueue.length) {
                let rejectedFn = this.rejectedQueue.shift();
                rejectedFn(this._value);
            };
        };

        // 完成状态转变，执行回调队列中的回调函数
        const _resolve = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                if(val instanceof MyPromise) {
                    val.then((res) => {
                        this._status = FULFILLED;
                        this._value = res;
                        handleFulfilledQueue();
                    }, (err) => {
                        this._status = REJECTED;
                        this._value = err;
                        handleRejectedQueue();
                    });
                } else {
                    this._status = FULFILLED;
                    this._value = val;
                    handleFulfilledQueue();
                }
            }
            // 保证promise 回调函数一定是在同步任务之后执行；
            setTimeout(fn, 0);
        }
        // 完成状态Pending到REJECTED的转变，执行rejected队列中的回调函数
        const _reject = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                this._status = REJECTED;
                this._value = val;
                handleRejectedQueue();
            }
            setTimeout(fn, 0);
        }
        
        try {  // 处理外部传入函数执行异常
            fn(_resolve, _reject);            
        } catch(e) {
            return _reject(e);
        }
    }

Promise 构造函数接收一个函数执行器作为参数，该执行器的两个参数 _resolve、_reject均为函数类型，由 Promise 内部实现。执行器在 Promise 构造函数中被立即执行。

注意： MyPromise 使用 Timeout 实现异步，使得 MyPromise 只能添加 macrotask，实际上原生的Promise 是 microtask

then 方法

then(successFn, failFn) {
        return new MyPromise((resolve, reject) => {
            // 执行成功时的回调函数
            const handleSucess = (fn) => {
                try {
                    if(typeof fn === 'function') {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        resolve(this._value)
                    }
                } catch(e){
                    reject(e);
                }
            }
            // 执行失败时的回调函数
            const handleFail = (fn) => {
                try {
                    if(typeof fn === 'function') {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        reject(this._value);
                    }
                } catch(e) {
                    reject(e);
                }
            }
            switch(this._status){
                case PENDING:       // 异步任务尚未完成，将回调函数推入相应队列
                    this.fulfilledQueue.push(() => {
                        handleSucess(successFn);
                    });
                    this.rejectedQueue.push(() => {
                        handleFail(failFn);
                    });
                    break;
                case FULFILLED:     // 异步任务成功完成，执行成功回调函数
                    handleSucess(successFn);
                    break;
                case REJECTED:      // 异步任务已失败，执行失败回调函数
                    handleFail(failFn);
                    break;
                default:
                    console.log('Promise error status:', this._status);
                    break;
            };
        });
    }

then 方法是 Promise 的一个主要方法，catch 和 finally 都可以用 then 来实现。当 Promise 的状态已经流转时，回调函数会立即被执行，当 Promise 还处于 Pending 状态时，回调函数被推入相应队列中等待执行。

完整代码

class MyPromise {
    constructor(fn) {
        this.fulfilledQueue = [];
        this.rejectedQueue = [];
        this._status = PENDING;
        this._value  = null;

        const handleFulfilledQueue = () => {
            while(this.fulfilledQueue.length) {
                let fulfiledFn = this.fulfilledQueue.shift();
                fulfiledFn(this._value);
            };
        };
        const handleRejectedQueue = () => {
            console.log(this.rejectedQueue);
            while(this.rejectedQueue.length) {
                let rejectedFn = this.rejectedQueue.shift();
                rejectedFn(this._value);
            };
        };

        // 完成状态转变，执行回调队列中的回调函数
        const _resolve = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                if(val instanceof MyPromise) {
                    val.then((res) => {
                        this._status = FULFILLED;
                        this._value = res;
                        handleFulfilledQueue();
                    }, (err) => {
                        this._status = REJECTED;
                        this._value = err;
                        handleRejectedQueue();
                    });
                } else {
                    this._status = FULFILLED;
                    this._value = val;
                    handleFulfilledQueue();
                }
            }
            setTimeout(fn, 0);
        }
        // 完成状态Pending到REJECTED的转变，执行rejected队列中的回调函数
        const _reject = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                this._status = REJECTED;
                this._value = val;
                handleRejectedQueue();
            }
            setTimeout(fn, 0);
        }
        
        try { // 处理外部传入函数执行异常
            fn(_resolve, _reject);            
        } catch(e) {
            
            return _reject(e);
        }
    }

    then(successFn, failFn) {
        return new MyPromise((resolve, reject) => {
            // 执行成功时的回调函数
            const handleSucess = (fn) => {
                try {
                    if(typeof fn === 'function') {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        resolve(this._value)
                    }
                } catch(e){
                    reject(e);
                }
            }
            // 执行失败时的回调函数
            const handleFail = (fn) => {
                try {
                    if(typeof fn === 'function') {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        reject(this._value);
                    }
                } catch(e) {
                    reject(e);
                }
            }
            switch(this._status){
                case PENDING:       // 异步任务尚未完成，将回调函数推入相应队列
                    this.fulfilledQueue.push(() => {
                        handleSucess(successFn);
                    });
                    this.rejectedQueue.push(() => {
                        handleFail(failFn);
                    });
                    break;
                case FULFILLED:     // 异步任务成功完成，执行成功回调函数
                    handleSucess(successFn);
                    break;
                case REJECTED:      // 异步任务已失败，执行失败回调函数
                    handleFail(failFn);
                    break;
                default:
                    console.log('Promise error status:', this._status);
                    break;
            };
        });
    }

    catch(failFn) {
        return this.then(null, failFn);
    }

    finally(finalFn){
        return this.then(finalFn, finalFn);
    }

    static resolve(val) {
        if(val instanceof MyPromise) {
            return val;
        } else {
            return new MyPromise((resolve, reject) =>{
                resolve(val);
            });
        }
    }

    static reject(val) {
        return new MyPromise((resolve, reject) => {     
            reject(val);
        });
    }

    static all(promiseArr) {
        return new Promise((resolve, reject) =>{
            const len = promiseArr.length;
            let count = 0;
            let result = [];
            for(let i = 0; i < len; i++) {
                promiseArr[i].then((val) => {
                    count++;
                    result.push[val];
                    if(count === len){
                        resolve(result);
                    }
                }, (err) => {
                    reject(err);
                });
            }
        });
    }

    static race(promiseArr) {
        return new Promise((resolve, reject) =>{
            const len = promiseArr.length;
            for(let i = 0; i < len; i++) {
                promiseArr[i].then((val) => {
                    resolve(val);
                }, (err) => {
                    reject(err);
                });
            }
        });
    }
}

promise const 源码

来斌

来斌

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

nodejs 几个不错的callback 以及promise 转换处理工具

nodejs 的一步调用经历了，callback -> promise -> async await（语法糖） 模式的转变

前端开发Kingcean 2020-06-11

await

　　②如果是 promise对象，await 返回的是 Promise 成功的值。　　④await 必须写在 async 中，但 async 中可以没有 await. 　　⑤如果 await 的 promise 失败，就会抛出异常，需要通过 try ...

前端开发Kingcean 2020-05-29

Promise

// 5. 生成器函数将使用yield关键字。yield暂停生成器的执行，并将控制权返回给迭代器。// 9. 可以生成任何数据类型，包括函数、数字、数组和对象。// yield会有一个返回值 第一个foo的返回值被第二个bar覆盖了，然后第一个foo就没有

89500297 2020-04-29

如何将Node.js中的回调转换为Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

nmgxzm00 2020-11-10

把 Node.js 中的回调转换为 Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

xixixi 2020-11-11

处理异步事件的三种方式

在网站开发中，异步事件是项目必然需要处理的一个环节，也因为前端框架的兴起，通过框架实现的 SPA 已经是快速建构网站的标配了，一部获取数据也就成了不可或缺的一环;本文来就讲一讲 JavaScript 中异步的处理方式。首先当然要先理解一下同步及异步分别是

88254251 2020-11-01

手把手教你实现 Promise的使用方法

很多 JavaScript 的初学者都曾感受过被回调地狱支配的恐惧，直至掌握了 Promise 语法才算解脱。虽然很多语言都早已内置了 Promise ，但是 JavaScript 中真正将其发扬光大的还是 jQuery 1.5 对 $.ajax 的重构，

MarukoMa 2020-09-02

关于 JavaScript 错误处理的最完整指南(下半部)

因为使用了 Promise ，所以可以使用 then 来接收返回的内容，或者用 catch 来捕获出现的错误。除了 then 和 catch , Promise 中还有 finally 方法，这类似于try/catch 中的 finally。如果我们失败了

88234852 2020-09-15

V8 8.5 带来的三个实用新特性！

Promise.anyPromise 新增了一个 any 方法，它接收一个 Promise 数组，当数组中某一个 Promise 为 fulfilled 后，它返回的 Promise 就会被返回。如果所有输入的 Promise 都被拒绝，那么 Promi

陈旭阳 2020-08-31

改写promise并添加超时处理

我们都知道Promise.all()方法在有一个Promise reject以后，请求结果只返回第一个reject，我们进行了改写，在有请求reject时也可以获取所有结果，并给每个请求添加超时处理。const promiseTimeout = new P

whynotgonow 2020-08-19

ES6 中Promise 使用

ES6中一个非常重要和好用的特性就是Promise. Promise是异步变成的一种解决方案。我们什么时候回处理异步事件呢？一种很常见的应用场景就是网络请求。我们封装一个网络请求的函数，因为不能立即拿到结果，所有不能直接显示结果返回。所以往往我们会传入另外

前端开发Kingcean 2020-07-30

带你写出符合Promise/A+ 规范Promise的源码

Promise是前端面试中的高频问题，如果你能根据PromiseA+的规范，写出符合规范的源码，那么我想，对于面试中的Promise相关的问题，都能够给出比较完美的答案。我的建议是，对照规范多写几次实现，也许第一遍的时候，是改了多次，才能通过测试，那么需要

whynotgonow 2020-07-29

es6 Promise 对象、.then()

// resolve // 状态改成fulfilled. },=>{ // 第二个回调 成功reject

whynotgonow 2020-07-26

前端客栈 - Promise书生 （一）

“前端客栈？想必前方就是宁安城了，此地为宁安城的郊区，”书生忖道，“时间不早了，今日不如在此停顿休整一日。”进得店里，书生吩咐店小二将马匹安排妥当。店小二靠墙边站着，大概其他客人下来得早。书生找了靠角落的位置坐下，店小二随即跟来，递上食单。不到一刻钟，店小

bowean 2020-07-08

ES6 promise的应用

function moveTo{ //四个参数分别为移动的元素、移动到对应的横纵坐标点，以及要移动完之后要调用的回调函数。el.style.transform = `translate`; //产生位移。.then(function(){ //then

前端开发Kingcean 2020-07-08

回调与Promise

Promise 对象就是用于表示一个异步操作的最终状态。它的流程就是在什么状态下需要执行什么样的操作。then是Promise对象上的一个方法，它最多需要有两个参数：表示异步操作执行后的回调函数。// // cb && cb()这

88520191 2020-07-05

promise 练习

宏队列和微队列；微队列先于宏队列执行。resolve() //resolve()函数执行了才会触发then里面的回调函数，不执行resolve()then回调函数不会执行的。const first = () => new Promise((resol

前端开发Kingcean 2020-06-27

Shell

stringify。const Promise = require('bluebird'),fs = require('fs'),path = require('path');fs.readFileAsync(path.join(__dirname, 's

88481456 2020-06-18

ES6 promise对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束

whynotgonow 2020-06-16

每天前端学习 关于Promise和Symbol

若 要等待多个结果回来，再进行返回，则可以使用 Promise.all. console.log //[‘成功了‘, ‘success‘]. ES6新增一个数据类型 Symbol ,但不支持 new Symbol，可以返回唯一值

88520191 2020-06-13
来斌

来斌

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号