Promise进阶——如何实现一个Promise库

时间 2020-02-10

标签 promise 进阶如何实现一个繁體版

原文原文链接

概述

从上次更新Promise/A+规范后，已经好久没有更新博客了。以前因为业务须要，完成了一个TypeScript语言的Promise库。此次咱们来和你们一步一步介绍下，咱们如何实现一个符合Promise/A+规范的Promise库。前端

若是对Promise/A+规范还不太了解的同窗，建议先看看上一篇博客——前端基础知识储备——Promise/A+规范。git

实现流程

首先，咱们来看下，在我实现的这一个Promise中，代码由下面这几部分组成：github

全局异步函数执行器
常量与属性
类方法
类静态方法

经过上面这四个部分，咱们就可以获得一个完整的Promise。这四个部分互相有关联，接下来咱们一个一个模块来看。typescript

全局异步函数执行器

在以前的Promiz的源码分析的博客中我有提到过，咱们如何来实现一个异步函数执行器。经过JavaScript的执行原理咱们能够知道，若是要实现异步执行相关函数的话，咱们能够选择使用宏任务和微任务，这一点在Promise/A+的规范中也有说起。所以，下面咱们提供了一个用宏任务来实现异步函数执行器的代码供你们参考。segmentfault

let index = 0;

if (global.postMessage) {
    global.addEventListener('message', (e) => {
        if (e.source === global) {
            let id = e.data;
            if (isRunningTask) {
                nextTick(functionStorage[id]);
            } else {
                isRunningTask = true;

                try {
                    functionStorage[id]();
                } catch (e) {

                }
                isRunningTask = false;
            }

            delete functionStorage[id];
            functionStorage[id] = void 0;
        }
    });
}

function nextTick(func) {
    if (global.setImmediate) {
        global.setImmediate(func);
    } else if (global.postMessage) {
        functionStorage[++index] = func;
        global.postMessage(index, '*')
    } else {
        setTimeout(func);
    }
}

经过上面的代码咱们能够看到，咱们一共使用了setImmediate、postMessage、setTimeout这三个添加宏任务的方法来进行一步函数执行。数组

常量与属性

说完了如何进行异步函数的执行，咱们来看下相关的常量与属性。在实现Promise以前，咱们须要定义一些常量和类属性，用于后面存储数据。让咱们一个一个来看下。promise

常量

首先，Promise共有5个状态，咱们须要用常量来进行定义，具体以下：异步

enum State {
    pending = 0,
    resolving = 1,
    rejecting = 2,
    resolved = 3,
    rejected = 4
};

这五个常量分别对应Promise中的5个状态，相信你们可以从名字中理解，咱们就很少讲了。函数

属性

在Promise中，咱们须要一些属性来存储数据状态和后续的Promise引用，具体以下：工具

class Promise {
    private _value;
    private _reason;
    private _next = [];
    public state: State = 0;
    public fn;
    public er;
}

咱们对属性进行逐一说明：

_value，表示在resolved状态时，用来存储当前的值。
_reason，表示在rejected状态时，用来存储当前的缘由。
_next，表示当前Promise后面跟着then函数的引用。
fn，表示当前Promise中的then方法的第一个回调函数。
er，表示当前Promise中的then方法的的第二个回调函数（即catch的第一个参数，下面看catch实现方法就能理解）。

类方法

看完了常量与类的属性，咱们来看下类的静态方法。

Constructor

首先，若是咱们要实现一个Promise，咱们须要一个构造函数来初始化最初的Promise。具体代码以下：

class Promise {
    constructor(resolver?) {
        if (typeof resolver !== 'function' && resolver !== undefined) {
            throw TypeError()
        }


        if (typeof this !== 'object') {
            throw TypeError()
        }

        try {
            if (typeof resolver === 'function') {
                resolver(this.resolve.bind(this), this.reject.bind(this));
            }
        } catch (e) {
            this.reject(e);
        }
    }
}

从Promise/A+的规范来看，咱们能够知道，若是resolver存在而且不是一个function的话，那么咱们就应该抛出一个错误；不然，咱们应该将resolve和reject方法传给resolver做为参数。

resolve && reject

那么，resolve和reject方法又是作什么的呢？这两个方法主要是用来让当前的这个Promise转换状态的，即从pending状态转换为resolving或者rejecting状态。下面让咱们来具体看下代码：

class Promise {
    resolve(value) {
        if (this.state === State.pending) {
            this._value = value;
            this.state = State.resolving;

            nextTick(this._handleNextTick.bind(this));
        }

        return this;
    }

    reject(reason) {
        if (this.state === State.pending) {
            this._reason = reason;
            this.state = State.rejecting;
            this._value = void 0;

            nextTick(this._handleNextTick.bind(this));
        }

        return this;
    }
}

从上面的代码中咱们能够看到，当resolve或者reject方法被触发时，咱们都改变了当前这个Proimse的状态，而且异步调用执行了_handleNextTick方法。状态的改变标志着当前的Promise已经从pending状态改变成了resolving或者rejecting状态，而相应_value和_reson也表示上一个Promise传递给下一个Promise的数据。

那么，这个_handleNextTick方法又是作什么的呢？其实，这个方法的做用很简单，就是用来处理当前这个Promise后面跟着的then函数传递进来的回调函数fn和er。

then && catch

在了解_handleNextTick以前，咱们们先看下then函数和catch函数的实现。

class Promise {
    public then(fn, er?) {
        let promise = new Promise();
        promise.fn = fn;
        promise.er = er;

        if (this.state === State.resolved) {
            promise.resolve(this._value);
        } else if (this.state === State.rejected) {
            promise.reject(this._reason);
        } else {
            this._next.push(promise);
        }

        return promise;
    }

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

由于catch函数调用就是一个then函数的别名，咱们下面就只讨论then函数。

在then函数执行时，咱们会建立一个新的Promise，而后将传入的两个回调函数用新的Promise的属性保存下来。而后，先判断当前的Promise的状态，若是已是resolved或者rejected状态时，咱们当即调用新的Promise中resolve或者reject方法，让下将当前Promise的_value或者_reason传递给下一个Promise，而且触发下一个Promise的状态改变。若是当前Promise的状态仍然为pending时，那么就将这个新生成的Promise保存下来，等当前这个Promise的状态改变后，再触发新的Promise变化。最后，咱们返回了这个Promise的实例。

handleNextTick

看完了then函数，咱们就能够来看下咱们提到过的handleNextTick函数。

class Promise {
    private _handleNextTick() {
        try {
            if (this.state === State.resolving && typeof this.fn === 'function') {
                this._value = this.fn.call(getThis(), this._value);
            } else if (this.state === State.rejecting && typeof this.er === 'function') {
                this._value = this.er.call(getThis(), this._reason);
                this.state = 1;
            }
        } catch (e) {
            this.state = State.rejecting;
            this._reason = e;
            this._value = void 0;
            this._finishThisTypeScriptPromise();
        }
        
        // if promise === x, use TypeError to reject promise
        // 若是promise和x指向同一个对象，那么用TypeError做为缘由拒绝promise
        if (this._value === this) {
            this.state = State.rejecting;
            this._reason = new TypeError();
            this._value = void 0;
        }
        
        this._finishThisTypeScriptPromise();
    }
}

咱们先来看一个简单版的_handleNextTick函数，这样可以帮助咱们快速理解Promise主流程。

异步触发了_handleNextTick函数后，咱们会判断当前用户处于的状态，若是当前Promise是resolving状态，咱们就会调用fn函数，即咱们在then函数调用时给新的Promise设置的那个fn函数；而如过当前Promise是rejecting状态，咱们就会调用er函数。

上面提到的getThis方法是用来获取特定的this值，具体的规范要求咱们将在稍后再进行介绍。

经过执行这两个同步的fn或er函数，咱们可以获得当前Promise执行完传入回调后的值。在这里须要说明的是：咱们在执行fn或者er函数以前，咱们在_value和_reason中存放的值，是上一个Promise传递下来的值。只有当执行完了fn或者er函数后，_value和_reason中存放的值才是咱们须要传递给下一个Promise的值。

你们到这里可能会奇怪，咱们的this指向没有发生变化，可是为何咱们的this指向的是那个新的Promise，而不是原来的那个Promise呢？

咱们能够从另一个角度来看待这个问题：咱们当前的这个Promise是否是由上一个Promise所产生的呢？若是是这种状况的话，咱们就能够理解，在上一个Promise产生当前Promise的时候，就设置了fn和er两个函数。

你们可能又会问，那么咱们第一个Promise的fn和er这两个参数是怎么来的呢？

那么咱们就须要仔细看下上面这个逻辑了。下面咱们只讨论第一个Promise处于pending的状况，其他的状况与这种情形基本相同。第一个Promise由于没有上一个Promise去设置fn和er两个参数，所以这两个参数的值就是undefined。因此在上面的逻辑中，咱们已经排除了这种状况，直接进入了_finishThisTypeScriptPromise函数中。

咱们在这里须要特别说明下的是，有些人会认为咱们在调用then函数传入的两个回调函数fn和er时，当前Promise就结束了，其实并非这样，咱们是获得了fn或者er两个函数的返回值，再将值传递给下一个Promise时，上一个Promise才会结束。关于这个逻辑咱们能够看下_finishThisTypeScriptPromise函数。

finishThisTypeScriptPromise

_finishThisTypeScriptPromise函数的代码以下：

class Promise {
    private _finishThisTypeScriptPromise() {
        if (this.state === State.resolving) {
            this.state = State.resolved;

            this._next.map((nextTypeScriptPromise) => {
                nextTypeScriptPromise.resolve(this._value);
            });
        } else {
            this.state = State.rejected;

            this._next.map((nextTypeScriptPromise) => {
                nextTypeScriptPromise.reject(this._reason);
            });
        }
    }
}

从_finishThisTypeScriptPromise函数中咱们能够看到，咱们在获得了须要传递给下一个Promise的_value或者_reason后，利用map方法逐个调用咱们保存的新生成的Promise实例，调用它的resolve方法，所以咱们又触发了这个Promise的状态从pending转变为resolving或者rejecting。

到这里咱们就已经彻底了解了一个Promise从最开始的建立，到最后结束的整个生命周期。下面咱们来看下在Promise/A+规范中提到的一些分支逻辑的处理状况。

上一个Promise传递的value是Thenable实例

首先，让咱们来了解下什么是Thenable实例。Thenable实例指的是属性中有then函数的对象。Promise就是的一种特殊的Thenable对象。

下面，为了方便讲解，咱们将用Promise来代替Thenable进行讲解，其余的Thenable类你们能够参考相似思路进行分析。

若是咱们在传递给咱们的_value中是一个Promise实例，那么咱们必须在等待传入的Promise状态转换到resolved以后，当前的Promise才可以继续往下执行，即咱们从传入的Promise中获得了一个非Thenable返回值时，咱们才能用这个值来调用属性中的fn或者er方法。

那么，咱们要怎么样才能获取到传入的这个Promise的返回值呢？在Promise中其实用到了一个很是巧妙的方法：由于传入的Promise中有一个then函数（Thenable定义），所以咱们就调用then函数，在第一个回调函数fn中传入获取_value，触发当前的Promise继续执行。若是是触发了第二个回调函数er，那么就用在er中获得的_reason来拒绝掉当前的Promise。具体判断逻辑以下：

class Promise {
    private _handleNextTick() {
        let ref;
        let count = 0;

        try {
            // 判断传入的this._value是否为一个thanable
            // check if this._value a thenable
            ref = this._value && this._value.then;
        } catch (e) {
            this.state = State.rejecting;
            this._reason = e;
            this._value = void 0;

            return this._handleNextTick();
        }

        if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {
            // add a then function to get the status of the promise
            // 在原有TypeScriptPromise后增长一个then函数用来判断原有promise的状态

            try {
                ref.call(this._value, (value) => {
                    if (count++) {
                        return;
                    }

                    this._value = value;
                    this.state = State.resolving;
                    this._handleNextTick();
                }, (reason) => {
                    if (count++) {
                        return;
                    }

                    this._reason = reason;
                    this.state = State.rejecting;
                    this._value = void 0;
                    this._handleNextTick();
                });
            } catch (e) {
                this.state = State.rejecting;
                this._reason = e;
                this._value = void 0;
                this._handleNextTick();
            }
        } else {
            try {
                if (this.state === State.resolving && typeof this.fn === 'function') {
                    this._value = this.fn.call(getThis(), this._value);
                } else if (this.state === State.rejecting && typeof this.er === 'function') {
                    this._value = this.er.call(getThis(), this._reason);
                    this.state = 1;
                }
            } catch (e) {
                this.state = State.rejecting;
                this._reason = e;
                this._value = void 0;
                this._finishThisTypeScriptPromise();
            }

            this._finishThisTypeScriptPromise();
        }
    }
}

promise === value

在Promise/A+规范中，若是返回的_value值等于用户自身时，须要用TypeError错误拒绝掉当前的Promise。所以咱们须要在_handleNextTick中加入如下判断代码：

class Promise {
        private _handleNextTick() {
        let ref;
        let count = 0;

        try {
            // 判断传入的this._value是否为一个thanable
            // check if this._value a thenable
            ref = this._value && this._value.then;
        } catch (e) {
            this.state = State.rejecting;
            this._reason = e;
            this._value = void 0;

            return this._handleNextTick();
        }

        if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {
            // add a then function to get the status of the promise
            // 在原有TypeScriptPromise后增长一个then函数用来判断原有promise的状态
            
            ...

        } else {
            try {
                if (this.state === State.resolving && typeof this.fn === 'function') {
                    this._value = this.fn.call(getThis(), this._value);
                } else if (this.state === State.rejecting && typeof this.er === 'function') {
                    this._value = this.er.call(getThis(), this._reason);
                    this.state = 1;
                }
            } catch (e) {
                this.state = State.rejecting;
                this._reason = e;
                this._value = void 0;
                this._finishThisTypeScriptPromise();
            }

            // if promise === x, use TypeError to reject promise
            // 若是promise和x指向同一个对象，那么用TypeError做为缘由拒绝promise
            if (this._value === this) {
                this.state = State.rejecting;
                this._reason = new TypeError();
                this._value = void 0;
            }

            this._finishThisTypeScriptPromise();
        }
    }
}

getThis

在Promise/A+规范中规定：咱们在调用fn和er两个回调函数时，this的指向有限制。在严格模式下，this的值应该为undefined；在宽松模式下时，this的值应该为global。

所以，咱们还须要提供一个getThis函数用于处理上述状况。具体代码以下：

class Promise {
    ...
}

function getThis() {
    return this;
}

类静态方法

咱们经过上面说到的类方法和一些特定分支的逻辑处理，咱们就已经实现了一个符合基本功能的Promise类。那么，下面咱们来看下ES6中提供的一些标准API咱们如何来进行实现。具体API以下：

resolve
reject
all
race

下面咱们就一个一个方法来看下。

resolve && reject

首先咱们来看下最简单的resolve和reject方法。

class Promise {
    public static resolve(value?) {
        if (TypeScriptPromise._d !== 1) {
            throw TypeError();
        }

        if (value instanceof TypeScriptPromise) {
            return value;
        }

        return new TypeScriptPromise((resolve) => {
            resolve(value);
        });
    }

    public static reject(value?) {
        if (TypeScriptPromise._d !== 1) {
            throw TypeError();
        }

        return new TypeScriptPromise((resolve, reject) => {
            reject(value);
        });
    }
}

经过上面代码咱们能够看到，resolve和reject方法基本上就是直接使用了内部的constructor方法进行Promise构建。

all

class Promise {
    public static all(arr) {
        if (TypeScriptPromise._d !== 1) {
            throw TypeError();
        }

        if (!(arr instanceof Array)) {
            return TypeScriptPromise.reject(new TypeError());
        }

        let promise = new TypeScriptPromise();

        function done() {
            // 统计还有多少未完成的TypeScriptPromise
            // count the unresolved promise
            let unresolvedNumber = arr.filter((element) => {
                return element && element.then;
            }).length;

            if (!unresolvedNumber) {
                promise.resolve(arr);
            }

            arr.map((element, index) => {
                if (element && element.then) {
                    element.then((value) => {
                        arr[index] = value;
                        done();
                        return value;
                    });
                }
            });
        }

        done();

        return promise;
    }
}

下面咱们根据上面的代码来简单说下all函数的基本思路。

首先咱们须要先建立一个新的Promise用于返回，保证后面用户调用then函数进行后续逻辑处理时能够设置新Promise的fn和er这两个回调函数。

而后，咱们怎么获取上面Promise数组中每个Promise的值呢？方法很简单，咱们在前面就已经介绍过：咱们调用了每个Promise的then函数用来获取当前这个Promise的值。而且，在每一个Promise完成时，咱们都检查下是否全部的Promise都已经完成，若是已经完成，则触发新Promise的状态从pending转换为resolving或者rejecting。

race

class Promise {
    public static race(arr) {
        if (TypeScriptPromise._d !== 1) {
            throw TypeError();
        }

        if (!(arr instanceof Array)) {
            return TypeScriptPromise.reject(new TypeError());
        }

        let promise = new TypeScriptPromise();

        function done(value?) {
            if (value) {
                promise.resolve(value);
            }

            let unresolvedNumber = arr.filter((element) => {
                return element && element.then;
            }).length;

            if (!unresolvedNumber) {
                promise.resolve(arr);
            }

            arr.map((element, index) => {
                if (element && element.then) {
                    element.then((value) => {
                        arr[index] = value;
                        done(value);
                        return value;
                    });
                }
            });
        }

        done();

        return promise;
    }
}

race的思路与all基本一致。只是咱们在处理函数上不一样。当咱们只要检测到数组中的Promise有一个已经转换到了resolve或者rejected状态（经过没有then函数来进行判断）时，就会当即出发新建立的Promise示例的状态从pending转换为resolving或者rejecting。

总结

咱们对Promise的异步函数执行器、常量与属性、类方法、类静态方法进行了逐一介绍，让你们对整个Promise的构造和声明周期有了一个深度的理解和认知。在整个开发中须要注意到的一些关键点和细节，我在上面也一一说明了。你们只须要按照这个思路，对照Promise/A+规范就可以完成一个符合规范的Promise库。

最后，给你们提供一个Promise/A+测试工具，你们实现了本身的Promise后，可使用这个工具来测试是否彻底符合整个Promise/A+规范。固然，你们若是想使用个人现成代码，也欢迎你们使用个人代码Github/typescript-proimse。