1. 正文

Promise的使用就不介绍了,直接根据Promise的使用方式,实现一个自己的Promise,以此来了解Promise的源码思想。

下面代码是Promise的使用案例,基于这个案例来实现Promise。这里创建了一个Promise对象,传入函数对象,函数接收两个函数参数,分别表示成功和失败,然后在then方法中打印获取到的参数。

let p = new Promise(funcion(resolve, reject) {
    reject('失败啦');
    resolve('成功啦');
});

p.then(function(value) {
    console.log(value);
})

首先先定义Promise的构造函数,因为创建Promise对象的时候会接收函数参数executor,并且函数会立即被调用,所以Promise内部立即执行这个函数。

function Promise (executor) {
    excutor();
}

executor函数会接收两个函数方法,这里需要在调用的时候传入两个方法进去,一个是resolve,一个reject,创建这两个函数。

function Promise (executor) {
    function resolve() {

    }
    function reject() {

    }
    excutor(resolve, reject);
}

调用resolvereject的时候会传入一个信息,成功的时候传递成功的值,失败的时候传递失败的原因,也就是resolvereject都需要接收参数。

function Promise (executor) {
    function resolve(value) {

    }
    function reject(reason) {

    }
    excutor(resolve, reject);
}

2. 添加then方法

Promise的对象存在一个then方法,这个then方法里面会有两个参数,一个是成功的回调onFulfilled,另一个是失败的回调onRejected,调用resolve会执行onFulfilled,调用reject会执行onRejected。这个方法需要添加在原型上。

Primsie.prototype.then = function(onFulfilled, onRejected) {

}

3. 添加状态

Promise存在3种状态的,等待状态pending,成功状态resolved,失败状态rejected,并且状态只可以改变一次,默认是等待状态,先调用了resolve就是成功状态,先调用reject就是失败状态。

通过status属性来保存这个状态,默认是pending。为了保证this不错乱使用self存储this,调用resolvereject的时候让状态发生改变。需要注意Promise状态只可改变一次,只有当状态未发生改变时才去改变状态。

function Promise (executor) {
    var self = this;

    self.status = 'pending';
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolved';
        }

    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
        }
    }
    excutor(resolve, reject);
}

成功resolve或失败reject是会传递参数的,这里需要保存起来,定义valuereason分别保存。

function Promise (executor) {
    var self = this;

    self.status = 'pending';
    self.value;
    self.reason;

    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolved';
            self.value = value;
        }

    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
        }
    }
    excutor(resolve, reject);
}

then方法中添加逻辑,当状态为成功时onFulfilled,状态失败时执行onRejected,并且分别传入相应的值。

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    if (self.status === 'resolved') {
        onFulfilled(self.value);
    }

    if (self.status === 'rejected') {
        onRejected(self.reason);
    }
}

至此就实现了一个简单的Promise

4. Promise A+规范

Promise的概念不是凭空出现的,是Promise A+规范中定义的,要求所有实现Promise的代码都必须要基于这个规范。

1.1 “promise”是一个具有then方法的对象或函数,其行为符合此规范。也就是说Promise是一个对象或者函数。

1.2 “thenable”是一个定义then方法的对象或函数,说句人话也就是这个对象必须要拥有then方法。

1.3 “value”是任何合法的JavaScript值(包括undefined、或者promise)。

1.4 promise中的异常需要使用throw语句抛出。

1.5 当promise失败的时候需要给出失败的原因。

1. 状态

1.1 promise必须要拥有三个状态: pending、fulfilled 和 rejected。

1.2 当promise的状态是pending时,他可以变为成功fulfilled或者失败rejected。

1.3 如果promise是成功状态,则他不能转换成任何状态,而且需要一个成功的值,并且这个值不能被改变。

1.4 如果promise是失败状态,则他不能转换成任何状态,而且需要一个失败的原因,并且这个值不能被改变。

5. then方法原理

现在Promise只实现了最简易的功能,还存在一个异步逻辑需要实现,现在是不支持的,因为当Promise函数中异步调用resolve的时候,then方法不会执行。因为then方法执行的时候resolve并没有执行,也就是Promise的状态还未变化。等到异步的Promise状态发生改变的时候,then已经执行完了。而官方的Promise无论then方法是否执行完毕,只要Promise状态变了,then中绑定的函数就会执行。

下面的例子是官方Promise的应用,同一个实例绑定多个then方法,所有的then绑定的成功或失败都会相应的执行。

let p = new Promise(funcion(resolve, reject) {
    setTimeout(function() {
        resolve('成功啦');
    }, 1000)    
});

p.then(function(value) {
    console.log(value);
})

p.then(function(value) {
    console.log(value);
})

p.then(function(value) {
    console.log(value);
})

需要改造Promise代码。当调用then方法的时候可能还是pending状态,这个时候应该把onFulfilledonRejected先存起来,当执行了resolve或者reject的时候再执行onFulfilledonRejected。所以需要定义两个变量,分别存储onFulfilledonRejected

function Promise (executor) {
    var self = this;

    self.status = 'pending';
    self.value;
    self.reason;
    self.onResolvedCallbacks = []; // 存放所有成功的回调。
    self.onRejectedCallbacks = []; // 存放所有失败的回调。
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolved';
            self.value = value;
        }

    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
        }
    }
    excutor(resolve, reject);
}

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    if (self.status === 'resolved') {
        onFulfilled(self.value);
    }

    if (self.status === 'rejected') {
        onRejected(self.reason);
    }
    if (self.status === 'pending') {
        self.onResolvedCallbacks.push(onFulfilled);
        self.onRejectedCallbacks.push(onRejected);
    }
}

因为onFulfilledonRejected在执行的时候需要传入对应的value值,这里用一个函数包裹起来,将对应的值也传入进去。

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    if (self.status === 'resolved') {
        onFulfilled(self.value);
    }

    if (self.status === 'rejected') {
        onRejected(self.reason);
    }
    if (self.status === 'pending') {
        self.onResolvedCallbacks.push(function () {
                onFulfilled(self.value);
            });
            self.onRejectedCallbacks.push(function() {
                onRejected(self.reason);
            });
    }
}

当成功或者失败的时候,执行onFulfilledonRejected的函数,也就是在resolve和reject中分别循环执行对应的数组函数。

function resolve(value) {
    if (self.status === 'pending') {
        self.status = 'resolved';
        self.value = value;
        self.onResolvedCallbacks.forEach(function (fn) {
            fn();
        })
    }
}

function reject(reason) {
    if (self.status === 'pending') {
        self.status = 'rejected';
        self.reason = reason;
        self.onRejectedCallbacks.forEach(function (fn) {
            fn();
        })
    }
}

这时候当异步执行resolve的时候,then中绑定的函数就会执行,并且绑定多个then的时候,多个方法也全部都会执行。

6. 实现链式调用

Promise最大的优点就是链式调用,如果一个then方法返回普通值,这个值会传递给下一次then中,作为成功的结果。如果返回的是一个primise,则会把promise的执行结果传递下去,并且取决于这个Promise的成功或失败。如果返回的是一个报错就会执行到下一个then的失败的函数中。

捕获错误的机制是,默认会找距离自己最近的then的失败方法,如果找不到就向下继续找,一直找到catch方法。

let p = new Promise(funcion(resolve, reject) {
    setTimeout(function() {
        resolve('成功啦');
    }, 1000)    
});

p.then(function(value) {
    retrun 123;
}).then(function(value) {
    console.log(value);
}).catch(function(error) {
    console.log(error);
}).then(function(data) {
    console.log(data);
})

Promise的链式调用和其它对象比如JQuery的链式调用有所不同,Promise的then方法返回的是一个全新的Promise,而不是当前的Promise。因为Promise的状态只能改变一次,如果使用同一个Promise的话后面的then就失去了成功失败的自由性。

then方法之后再去return一个新的Promise,原本的逻辑放在新创建的Promise内部即可,因为他是立即执行的一个函数。这里定义一个promise2接收新创建的Promise,在函数底部返回出去。

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    const promise2 = new Promise(function (resolve, reject) {
        if (self.status === 'resolved') {
            onFulfilled(self.value);
        }

        if (self.status === 'rejected') {
            onRejected(self.reason);
        }
        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(function () {
                onFulfilled(self.value);
            });
            self.onRejectedCallbacks.push(function() {
                onRejected(self.reason);
            });
        }
    })
    return promise2;
}

还需要拿到then方法执行的结果,前一个then方法的返回值会传递给下一个then。

...
const x = onFulfilled(self.value);
...
const x = onRejected(self.reason);
...

如果x是一个普通值可以直接调用promise2resolve方法,将这个值传递出去,这样下一个then就可以获取的到,所以执行resolve(x)

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    const promise2 = new Promise(function (resolve, reject) {
        if (self.status === 'resolved') {
            const x = onFulfilled(self.value);
            resolve(x);
        }

        if (self.status === 'rejected') {
            const x = onRejected(self.reason);
            resolve(x);
        }
        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(function () {
                const x = onFulfilled(self.value);
                resolve(x);
            });
            self.onRejectedCallbacks.push(function() {
                const x = onRejected(self.reason);
                resolve(x);
            });
        }
    })
    return promise2;
}

如果失败需要执行reject方法,这里使用try...catch捕获错误。

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    const promise2 = new Promise(function (resolve, reject) {
        if (self.status === 'resolved') {
            try {
                const x = onFulfilled(self.value);
                resolve(x);
            } catch(e) {
                reject(e);
            } 
        }

        if (self.status === 'rejected') {
            try {
                const x = onRejected(self.reason);
                resolve(x);
            } catch(e) {
                reject(e);
            } 
        }
        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(function () {
                try {
                    const x = onFulfilled(self.value);
                    resolve(x);
                } catch(e) {
                    reject(e);
                } 
            });
            self.onRejectedCallbacks.push(function() {
                try {
                    const x = onRejected(self.reason);
                    resolve(x);
                } catch(e) {
                    reject(e);
                } 
            });
        }
    })
    return promise2;
}

然后onFulfilled(self.value)返回的值不一定是一个常量,还可能是个promise,需要写一个方法来判断,如果返回值是promise就调用promise,否则才继续向resolve传递。

这里定义一个resolvePromise方法,在函数中判断返回值x和promse2的关系以及后续的处理,所以需要传递promise2参数,x参数,resolve参数和reject参数。

4个参数是不能直接传递至resolvePromise中的,文档中要求他们不能在当前的上下文,所以要在try...catch代码块外层添加setTimeout在异步线程中添加。

function resolvePromise (promise2, x, resolve, reject) {

}

Primsie.prototype.then = function(onFulfilled, onRejected) {
    var self = this;
    const promise2 = new Promise(function (resolve, reject) {
        if (self.status === 'resolved') {
            setTimeout(function() {
                try {
                    const x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                } 
            }, 0)
        }

        if (self.status === 'rejected') {
            setTimeout(function() {
                try {
                    const x = onRejected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            }, 0)
        }
        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(function () {
                setTimeout(function() {
                    try {
                        const x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                }, 0)
            });
            self.onRejectedCallbacks.push(function() {
                setTimeout(function() {
                    try {
                        const x = onRejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                }, 0)
            });
        }
    })
    return promise2;
}

7. resolvePromise函数

resolvePromise函数的作用是判断x是否是promise,如果是promise就执行并且将执行结果添加到resolve方法中,如果是常量则直接添加到resolve方法中。这些内容在文档上都可以找得到,具体可以自行翻阅文档,这里就不列出了,直接代码实现。

首先判断promise2x引用了一个相同的对象,也就是他们是同一个promise对象。比如下面这种情况。

const p = new Promise(function(resolve, reject) {
    resolve('成功');
})
const promise2 = p.then(data => { // 这个时候x和promise2就是相等的,也就是自己等待自己去做做完什么事,等 和 做某事不能同时执行。
    return promise2;
})

应该抛出一个类型错误作为错误原因。

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) { // 防止自己等待自己
        return reject(new TypeError('循环引用了'));
    }
}

如果xpromise类型,直接使用x的状态,也就是x成功就成功,x失败就失败。如果x是对象或者函数,就取他的then方法,获取then方法的时候如果出现异常,就执行失败。因为then方法可能是对象的一个不可访问的方法,get的时候报异常,所以我们需要使用try...catch去获取。

如果x不是promise类型,是个普通值,直接调用resolve就可以。

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) { // 防止自己等待自己
        return reject(new TypeError('循环引用了'));
    }
    // x是object或者是个function
    if ((x !== null && typeof x === 'object') || typeof x === 'function') {
        try {
            let then = x.then;
        } catch (e) {
            reject(e);
        }
    } else {
        resolve(x);
    }
}

接着判断then,如果then是个函数,就认为他是Promise, 需要通过call执行then方法,改变this的指向为xthen中传入成功和失败的函数,官方文档中指明成功函数的参数叫y,失败的参数为r

如果then不是一个函数那么当前这个then是一个普通对象,调用resolve方法直接返回即可。

try {
    let then = x.then;
    if (typeof then === 'function') {
        then.call(x, function (y) {
            resolve(y); // 成功的结果,让promise2变为成功状态
        }, function (r) {
            reject(r);
        });
    } else {
        resolve(x)
    }
} catch (e) {
    reject(e);
}

y有可能也是一个Promise,所以不能直接写resolve(y),应该递归判断ypromise2的关系。需要调用resolvePromiseythen的成功回调返回的值,和之前的x基本一个概念。

为什么这里要用递归呢,因为then返回的可能是Promise嵌套,也就是Promise中仍旧包含Promise,在Promise的标准中这样的写法是被允许的。所以要用递归来解决,拿到最终的返回,也就是基本类型。

try {
    let then = x.then;
    if (typeof then === 'function') {
        then.call(x, function (y) {
            resolvePromise (promise2, y, resolve, reject)
            // resolve(y); // 成功的结果,让promise2变为成功状态
        }, function (r) {
            reject(r);
        });
    } else {
        resolve(x)
    }
} catch (e) {
    reject(e);
}

自己编写的Promise可能会和别人的Promise嵌套使用,官方文档要求,Promise中要书写判断避免因对方Promise编写不规范带来的影响。

比如对方的Promise成功和失败都调用了,或者多次调用了成功。需要使用called变量来表示Promise有没有被调用过,一旦状态改变就不能再改变了。

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) { // 防止自己等待自己
        return reject(new TypeError('循环引用了'));
    }
    let called; // 表示Promise有没有被调用过
    // x是object或者是个function
    if ((x !== null && typeof x === 'object') || typeof x === 'function') {
        try {
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, function (y) {
                    if (called) { // 是否调用过
                        return;
                    }
                    called = true;
                    resolvePromise (promise2, y, resolve, reject)
                }, function (r) {
                    if (called) { // 是否调用过
                        return;
                    }
                    called = true;
                    reject(r);
                });
            } else { // 当前then是一个普通对象。
                resolve(x)
            }
        } catch (e) {
            if (called) { // 是否调用过
                return;
            }
            called = true;
            reject(e);
        }
    } else {
        if (called) { // 是否调用过
            return;
        }
        called = true;
        resolve(x);
    }
}

当前Promise还存在一个小问题,如果Promise有多个then方法,只在最后一个then方法中传递了onFulfilled,是需要将Promise的返回值传递过去的,也就是下面的代码需要用内容输出,这叫值的穿透。

p.then().then().then(function(data) {
    console.log(data);
})

实现起来也比较简单,假如用户没有传递onFulfilled,或者传入的不是函数,可以给个默认值,也就是这个参数是一个可选参数。

Primsie.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (data) { return data;};
    onRejected = typeof onRejected === 'function' ? onRejected : function (err) { throw err;};
}

最后在调用executor的时候也可能会出错,只要Promise出现错误,就需要走到thenreject中,所以这里也需要try...catch

try {
    executor(resolve, reject);
} catch (e) {
    reject(e);
}

至此Promise就写完了,全部代码如下:

function Promise (executor) {
    var self = this;
    self.status = 'pending';
    self.value;
    self.reason;
    self.onResolvedCallbacks = []; // 存放所有成功的回调。
    self.onRejectedCallbacks = []; // 存放所有失败的回调。
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'resolved';
            self.value = value;
            self.onResolvedCallbacks.forEach(function (fn) {
                fn();
            })
        }
    }

    function reject(reason) {
        if (self.status === 'pending') {
            self.status = 'rejected';
            self.reason = reason;
            self.onRejectedCallbacks.forEach(function (fn) {
                fn();
            })
        }
    }
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) { // 防止自己等待自己
        return reject(new TypeError('循环引用了'));
    }
    let called; // 表示Promise有没有被调用过
    // x是object或者是个function
    if ((x !== null && typeof x === 'object') || typeof x === 'function') {
        try {
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, function (y) {
                    if (called) { // 是否调用过
                        return;
                    }
                    called = true;
                    resolvePromise (promise2, y, resolve, reject)
                }, function (r) {
                    if (called) { // 是否调用过
                        return;
                    }
                    called = true;
                    reject(r);
                });
            } else { // 当前then是一个普通对象。
                resolve(x)
            }
        } catch (e) {
            if (called) { // 是否调用过
                return;
            }
            called = true;
            reject(e);
        }
    } else {
        if (called) { // 是否调用过
            return;
        }
        called = true;
        resolve(x);
    }
}

Promise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (data) { return data;};
    onRejected = typeof onRejected === 'function' ? onRejected : function (err) { throw err;};
    var self = this;
    const promise2 = new Promise(function (resolve, reject) {
        if (self.status === 'resolved') {
            setTimeout(function() {
                try {
                    const x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                } 
            }, 0)
        }

        if (self.status === 'rejected') {
            setTimeout(function() {
                try {
                    const x = onRejected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            }, 0)
        }
        if (self.status === 'pending') {
            self.onResolvedCallbacks.push(function () {
                setTimeout(function() {
                    try {
                        const x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                }, 0)
            });
            self.onRejectedCallbacks.push(function() {
                setTimeout(function() {
                    try {
                        const x = onRejected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch(e) {
                        reject(e);
                    }
                }, 0)
            });
        }
    })
    return promise2;
}

8. 测试

可以使用promises-aplus-tests测试Promise是否符合规范。测试的时候需要提供一段脚本,通过入口进行测试。

Promise.defer = Promise.deferred =  function() {
    let dfd = {};
    dft.promise = new Promise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd;
}
# 安装
npm install promises-aplus-tests -g

# 执行测试脚本
promises-aplus-tests promise.js

9. 静态方法实现

Promise.all = function (values) {
    return new Promise(function (resolve, reject) {
        var arr = []; // 最终结果的数组
        var index = 0;

        function processData (key, value) {
            index++;
            arr[key] = value;
            if (index === values.length) {
                resolve(arr);
            }
        }

        for (var i = 0; i < values.length; i++) {
            var current = values[i];
            if (current && current.then && typeof current.then === 'function') {
                current.then(function(y) {
                    processData(i, y);
                }, reject);
            } else {
                processData(i, current);
            }
        }
    });
}

Promise.race = function (values) {
    return new Promise(function (resolve, reject) {
        for (var i = 0; i < values.length; i++) {
            var current = values[i];
            if (current && current.then && typeof current.then === 'function') {
                current.then(resolve, reject);
            } else {
                resolve(current);
            }
        }
    });
}

Promise.resolve = function(value){
    return new Promise((resolve,reject)=>{
        resolve(value);
    });
}

Promise.reject = function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason);
    });
}

转载须知

如转载必须标明文章出处文章名称文章作者,格式如下:

转自:【致前端 - zhiqianduan.com】 promise源码实现  "隐冬"
请输入评论...