前端工程师必知之Promise的实现

Xrss
11,180 阅读9分钟

Promise是什么？

在Javascript的世界中，代码都是单线程执行的。这就导致我们的代码里会有嵌套回调函数，一旦嵌套过多，导致代码不容易理解和维护。

为了降低异步编程的复杂性，开发人员一直在寻找各种解决方案，Promise只是用来处理异步操作的其中一个方案。

下面我就结合着Promise的使用场景，来逐一手写Promise的实现原理。

因为ES6最终采用了Promise/A+ 规范，下面所有代码都是基于Promise/A+规范来实现。有兴趣的同学可以查看 Promise/A+规范 https://promisesaplus.com/

Promise的基本使用：

let promise = new Promise((resolve,reject)=>{
  resolve('success'); //这里如果是reject('fail')
});
promise.then((res)=>{
  console.log(res); // 输出：success
},(err)=>{
  console.log(err); // 上面如果执行reject('fail') 这里就输出:fail
});

看图就很好理解了，resolve找then里的成功回调，reject找then里失败的回调。

那么如何用我们自己的方式一步步实现这样的一个Promise类呢？直接上代码吧，我会注释得稍微详细点。

class Promise { //创建一个Promise类
    constructor(executor) {
        this.status = 'pending'; //初始默认状态为pending
        this.value = undefined; //默认赋值为undefined
        this.reason = undefined; //默认赋值为undefined
        let resolve = (value) => {
            if (this.status === 'pending') { //只有状态为pending才能转换状态
                this.value = value; //将传递进来的的值赋给value保存
                this.status = 'resolved'; //将状态设置成resolved
            }
        }
        let reject = (reason) => {
            if (this.status === 'pending') { //只有状态为pending才能转换状态
                this.reason = reason; //将传递进来的失败原因赋给reason保存
                this.status = 'rejected'; //将状态设置成rejected
            }
        }
        executor(resolve, reject); //默认执行executor
    }
    then(onFulfilled, onRejected) { //等同于es5的Promise.prototype.then 当调用then的时候,根据状态，来执行不同的函数
        if (this.status === 'resolved') { //如果状态是resolved
            onFulfilled(this.value); //执行成功的resolve，并将成功后的值传递过去
        }
        if (this.status === 'rejected') { //如果状态是rejected
            onRejected(this.reason); //执行失败的reject,并将失败原因传递过去
        }
    }
}
module.exports = Promise; //将Promise导出

现在只要在js代码中引入Promise库，就能实现最基本的Promise功能了。

输出结果：success

还有一点需要注意，就是当代码出现错误的情况下，我们需要能够捕获错误，并且处理错误。所以在executor(resolve, reject)这一行代码需要处理下,包上一层try/catch，如下：

try {
    executor(resolve, reject); 
} catch (e) {
    reject(e); //如果发生错误，将错误放入reject中
}

setTimeout调用问题

此时的Promise类可以实现调用resolve,也可以调用reject。调用then之后都会执行相应的函数。看似已经没有问题了。但如果将resolve放在一个定时器里呢？看看下面的代码：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('setTimeout');
    }, 500);
})
promise.then((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
})

我们会发现上面的代码在控制台完全没有反应，这是为什么呢？实际上是因为我们压根就没有处理这种延迟调用的情况。现在我们来处理以下：

class Promise { //创建一个Promise类
    constructor(executor) {
        ...此处略去部分代码
        this.successStore = []; //定义一个存放成功函数的数组
        this.failStore = []; //定义一个存放失败函数的数组
        let resolve = (value) => {
            if (this.status === 'pending') { //只有状态为pending才能转换状态
                ...此处略去部分代码
                this.successStore.forEach(fnc => fnc()); //一次执行数组中的成功函数
            }
        }
        let reject = (reason) => {
            if (this.status === 'pending') { //只有状态为pending才能转换状态
                ...此处略去部分代码
                this.failStore.forEach(fnc => fnc()) //依次执行数组中的失败函数
            }
        }
       ...此处略去部分代码

    }
    then(onFulfilled, onRejected) { //等同于es5的Promise.prototype.then 当调用then的时候,根据状态，来执行不同的函数
        ...此处略去部分代码
        if (this.status === 'pending') { //此处增加一种状态判断
            this.successStore.push(() => { //当状态为pending时将成功的函数存放到数组里
                onFulfilled(this.value);
            })
            this.failStore.push(() => { //当状态为pending时将失败的函数存放到数组中
                onRejected(this.reason);
            })
        }
    }
}
module.exports = Promise; //将Promise导出

这样就解决了setTimeout调用的问题了。

then的链式调用

细心的同学肯定看到了，在我们上面的代码中，其实并没有处理then的链式调用。如果此时使用then()方法的链式调用，会报错：TypeError: Cannot read property 'then' of undefined。

Promise/A+规范里说了，then()方法返回的必须是Promise实例，这里我们可以理解成返回的必须是一个新的Promise实例。所以then()方法后面可以继续跟另一个then()方法进行链式调用。

但是then()方法里可能发挥一个值或者返回的是一个Promise实例，这就需要我们分别处理这两种情况。

第一种：

let promise = new Promise((resolve, reject) => {
    resolve('success');
})
p.then((res)=>{
    console.log(res); // success
    return 'hello world!' 
},(err)=>{
    console.log(err); 
}).then((res)=>{
    console.log(res); // hello world   
},(err)=>{
    console.log(err);
})

在then()方法的回调里返回一个普通值，无论是成功还是失败的回调，都会进入到下一个then()的成功态里。如下：

let promise = new Promise((resolve, reject) => {
    reject('fail');
})
p.then((res)=>{
    console.log(res); 
},(err)=>{
    console.log(err);  //fail
    return 'fail';
}).then((res)=>{
    console.log(res);  //fail 注意：此时走的是成功回调，并非失败的回调
},(err)=>{
    console.log(err); 
})

第二种：

let promise = new Promise((resolve, reject) => {
    resolve();
})
promise.then((res)=>{
    return new Promise((resolve,reject)=>{ //返回一个新的Promise
        resolve('hello world'); 
    })
},(err)=>{
    console.log(err); 
}).then((res)=>{
    console.log(res); //hello world    
},(err)=>{
    console.log(err);
})

这两种情况都要考虑到，我们修改下代码：

function handlePromise(promise2, x, resolve, reject) {
    if (promise2 === x) { //promise2是否等于x,也就是判断是否将自己本身返回
        return reject(new TypeError('circular reference')); //如果是抛出错误
    }
    //判断x不是bull且x是对象或者函数
    if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
        let called; //called控制resolve或reject 只执行一次，多次调用没有任何作用。
        try {
            let then = x.then; //取x.then()方法
            if (typeof then === 'function') { //如果是函数，就认为它是返回新的promise
                then.call(x, y => {  //如果y是promise继续递归解析
                    if (called) return;
                    called = true;
                    handlePromise(promise2, y, resolve, reject); //递归解析promise
                }, r => {
                    if (called) return;
                    called = true;
                    reject(r)
                })
            } else { //不是函数，就是普通对象
                resolve(x); //直接将对象返回
            }
        } catch (e) {
            if (called) return;
            called = true;
            reject(e);
        }
    } else { //x是普通值，直接走then的成功回调
        resolve(x);
    }
}
class Promise {
    constructor(executor) {
        this.status = 'pending';
        this.value = undefined;
        this.reason = undefined;
        this.successStore = [];
        this.failStore = [];
        let resolve = (value) => {
            if (this.status === 'pending') {
                this.value = value;
                this.status = 'resolved';
                this.successStore.forEach(fn => fn());
            }
        }
        let reject = (reason) => {
            if (this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected';
                this.failStore.forEach(fn => fn());
            }
        }
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected) { //原型上的方法
        let promise2; // 返回的新的promise
        if (this.status === 'resolved') {
            promise2 = new Promise((resolve, reject) => {
                try {
                    let x = onFulfilled(this.value);
                    handlePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }

            })
        }
        if (this.status === 'rejected') {
            promise2 = new Promise((resolve, reject) => {
                try {
                    let x = onRejected(this.reason); //x存放返回的结果
                    handlePromise(promise2, x, resolve, reject); //处理返回结果的函数，已经在上面定义
                } catch (e) {
                    reject(e);//报错执行reject
                }
            })
        }
        if (this.status === 'pending') {
            promise2 = new Promise((resolve, reject) => {
                this.successStore.push(() => {
                    try {
                        let x = onFulfilled(this.value); //x存放返回的结果
                        handlePromise(promise2, x, resolve, reject);//处理返回结果的函数，已经在上面定义
                    } catch (e) {
                        reject(e); //报错执行reject
                    }

                })
                this.failStore.push(() => {
                    try {
                        let x = onRejected(this.reason);//x存放返回的结果
                        handlePromise(promise2, x, resolve, reject);//处理返回结果的函数，已经在上面定义
                    } catch (e) {
                        reject(e);//报错执行reject
                    }
                })
            })
        }
        return promise2; //返回新的promise
    }
}
module.exports = Promise;

处理值穿透

先看实例

let promise = new Promise((resolve, reject)=>{
    resolve('hello world');
})
promise.then().then().then((res)=>{ 
    console.log(res);//我们希望可以正常打印出hello world，如何处理呢？
})

只需要在then的原型方法上加上一层判断，判断then里是否传递里函数，如果没有传递，我们手动传递一个函数，并让值返回。

then(onFulfilled, onRejected) { //原型上的方法
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : y => y; //判断是否是一个函数
    onRejected = typeof onRejected === 'function' ? onRejected : errr => { //判断是否是一个函数
        throw err; //注意，这里不是返回值，而是抛出错误
    }
}

这样当我们调用Promise时就可以正常打印出hello world了。

添加catch方法

下面我们继续添加catch方法

then(onFulfilled, onRejected){
    ...
}
catch(onRejected){ //在此处添加原型上的方法catch
    return this.then(null,onRejected);
}

catch()其实就是简易版的then()方法，它没有成功的回调，只有失败的回调。所以按照上面的方式处理下就可以了。

添加Promise.all方法

Promise.all = function (promiseArrs) { //在Promise类上添加一个all方法，接受一个传进来的promise数组
    return new Promise((resolve, reject) => { //返回一个新的Promise
        let arr = []; //定义一个空数组存放结果
        let i = 0;
        function handleData(index, data) { //处理数据函数
            arr[index] = data;
            i++;
            if (i === promiseArrs.length) { //当i等于传递的数组的长度时 
                resolve(arr); //执行resolve,并将结果放入
            }
        }
        for (let i = 0; i < promiseArrs.length; i++) { //循环遍历数组
            promiseArrs[i].then((data) => {
                handleData(i, data); //将结果和索引传入handleData函数
            }, reject)
        }
    })
}

下面我们逐个添加reace、resolve和reject方法。

添加Promise.race方法

race比赛竞赛的意思，也就是谁跑的快就返回谁，不管你是成功还是失败。跟all方法比较相似，但更简单一些。循坏之后直接

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(resolve, reject);
        }
    })
}

经过上面的代码，以下两个方法就显得很简单了，直接返回一个新的Promise，然后执行成功/失败既可。

添加Promise.resolve方法

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

添加Promise.reject方法

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

如果想要用promises-aplus-tests测试是否符合Promise/A+规范的话，就要加上一段代码：

Promise.deferred = Promise.defer = function () { //这是promise的语法糖
  let dfd = {};
  dfd.promise = new Promise((resolve,reject)=>{
    dfd.resolve = resolve;
    dfd.reject = reject;
  })
  return dfd;
}

在终端安装完promises-aplus-tests后，在文件的终端下执行promises-aplus-tests "文件名"既可

npm install promises-aplus-tests -g
promises-aplus-tests filename

最后，解决下异步的问题，完整代码如下：

function handlePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('circular reference'));
    }
    if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
        let called;
        try {
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, y => {
                    if (called) return;
                    called = true;
                    handlePromise(promise2, y, resolve, reject);
                }, r => {
                    if (called) return;
                    called = true;
                    reject(r)
                })
            } else {
                resolve(x);
            }
        } catch (e) {
            if (called) return;
            called = true;
            reject(e);
        }

    } else {
        resolve(x);
    }
}
class Promise {
    constructor(executor) {
        this.status = 'pending';
        this.value = undefined;
        this.reason = undefined;
        this.successStore = [];
        this.failStore = [];
        let resolve = (value) => {
            if (this.status === 'pending') {
                this.value = value;
                this.status = 'resolved';
                this.successStore.forEach(fn => fn());
            }
        }
        let reject = (reason) => {
            if (this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected';
                this.failStore.forEach(fn => fn());
            }
        }
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : y => y;
        onRejected = typeof onRejected === 'function' ? onRejected : errr => {
            throw err;
        }
        let promise2; 
        if (this.status === 'resolved') {
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => { //异步处理
                    try {
                        let x = onFulfilled(this.value);
                        handlePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            })
        }
        if (this.status === 'rejected') {
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => { //异步处理
                    try {
                        let x = onRejected(this.reason);
                        handlePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            })
        }
        if (this.status === 'pending') {
            promise2 = new Promise((resolve, reject) => {
                this.successStore.push(() => {
                    setTimeout(() => { //异步处理
                        try {
                            let x = onFulfilled(this.value);
                            handlePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);
                })
                this.failStore.push(() => {
                    setTimeout(() => { //异步处理
                        try {
                            let x = onRejected(this.reason);
                            handlePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);
                })
            })
        }
        return promise2;
    }
}

Promise.all = function (promiseArrs) {
    return new Promise((resolve, reject) => {
        let arr = [];
        let i = 0;

        function processData(index, data) {
            arr[index] = data;
            i++;
            if (i === promiseArrs.length) {
                resolve(arr);
            }
        }
        for (let i = 0; i < promiseArrs.length; i++) {
            promiseArrs[i].then((data) => {
                processData(i, data);
            }, reject)
        }
    })
}

Promise.deferred = Promise.defer = function () {
    let dfd = {};
    dfd.promise = new Promise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.reject = reject;
    })
    return dfd;
}

module.exports = Promise;

现在，一个符合Promise/A+规范的Promise类已经完成了。见解有限，如有描述不准确之处，请帮忙及时指出。如有错误，一定会及时更正。

参考

segmentfault.com/a/119000000…
promisesaplus.com/
zhuanlan.zhihu.com/p/25178630

avatar
文章
阅读
粉丝