实现一个Promise

前言

上一篇文章记录了关于promise的一些常规用法，这篇文章尝试基于Promise/A+规范实现一个promise对象。

看个栗子

下面代码是promise的最基本的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new Promise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

getRandomNum方法返回一个Promise,可以通过它的then方法注册在promise异步操作成功和失败时执行的回调。

研究其原理

先来大概了解一下promise/A+规范是的要求。
首先，promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；
两个硬性要求：
1、一个 promise 必须提供一个 then 方法以访问其当前值（value）、终值（eventual value）和据因（reason）。

2、一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

先来实现的then方法

promise 的 then 方法接受两个参数：

1
promise.then(onFulfilled, onRejected)

还有其他几点要求：
1、调用要求:
onFulfilled 和 onRejected 必须被作为函数调用（即没有 this 值）
2、多次调用：
then 方法可以被同一个 promise 调用多次
3、返回：
then 方法必须返回一个 promise 对象

好了，下面开始实现吧！为了易于理解，暂时先不加入onRejected回调参数，在最后会加入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// fn为构造函数参数
function MyPromise(fn){
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    this.callbacks.push(onFulfilled);
    return this;  // 实现then方法的链式调用
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}
// 试一下
function getRandomNum(){
    return new MyPromise(function(resolve){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                // 执行then方法注册的回调函数
                resolve(randNum);    
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
}).then(function(res){
    console.log('链式调用')
})

上述逻辑：

1、调用then方法，将想要在Promise异步操作成功时执行的回调放入callbacks队列；
2、创建Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行；

有一个问题：如果Promise异步操作已经成功，在异步操作成功之前注册的then回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了。

引入状态控制

promise有三种状态：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。
此处输入图片的描述
改进后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled){
    if(this.state === 'pending'){
        this.callbacks.push(onFulfilled);
        return this;  // 实现then方法的链式调用
    }
    onFulfilled(this.value);
    return this;
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            callback(that.value);
        });
    },0);
}

上述代码的思路是这样的：resolve执行时，会将状态设置为fulfilled，在此之后调用then添加的新回调，都会立即执行。

链式调用Promise

如果then函数里面注册的仍然是一个Promise，该如何解决呢？？下面的场景应该会经常用到。

1
2
3
4
5
6
// getUserData为外层的promise对象，getQuestionData 内层的promise对象
getUserData()
    .then(getQuestionData)
    .then(function (value) {
        // 对接口返回的数据进行处理
    });

实现方案就是在then方法中再返回一个promise对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数被调用
    fn(this._resolve.bind(this));
}
// then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。
MyPromise.prototype.then = function(onFulfilled){
    var that = this;
    return new MyPromise(function(resolve){
        that._handle({
            onFulfilled:onFulfilled || null,
            resolve:resolve
        });
    });
}
// 
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
    // 如果then中没有传递任何东西，直接结束promise，执行链式中的下一个then方法
    if(!callback.onFulfilled){
        callback.resolve(this.value);
        return;
    }
    // 如果回调函数是promise对象，则返回promise对象，或者拿到普通回调函数的值
    var ret = callback.onFulfilled(this.value);
    callback.resolve(ret);
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        // result为当前的promise对象，如果调用resolve方法传入的是promise对象会有then方法，先执行then方法，等待promise执行完成，再执行下一次循环，知道promise操作执行完成，result就为普通值
        var then = result.then;
        if( typeof then === 'function' ){
            // 外层promise对象的resolve方法，等then方法中的resolve方法执行完成之后
            then.call(result,that._resolve);
            return;
        }
    }
    
    // result 为普通值
    this.value = result;
    this.state = 'fulfilled';
    var that = this;
    
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述过程好像有点复杂，不过多多理解一下就可以完全理解promise了

加入失败状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// fn为构造函数参数
function MyPromise(fn){
    // 加入状态，初始状态为pendding
    this.state = 'pending';
    // 回调队列，用来存放then方法注册的回调函数
    this.callbacks = [];
    // promise的终值
    this.value = null;
    // 构造函数参数被调用
    fn(this._resolve.bind(this),this._reject.bind(this));
}
// then方法
MyPromise.prototype.then = function(onFulfilled,onRejected){
    var that = this;
    return new MyPromise(function(resolve,reject){
        that._handle({
            onFulfilled:onFulfilled || null,
            onRejected: onRejected || null,
            resolve:resolve,
            reject: reject
        });
    });
}
// promise then方法公共处理
MyPromise.prototype._handle = function(callback){
    if(this.state === 'pending'){
        this.callbacks.push(callback);
        return;
    }
     var cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,
            ret;
        if (cb === null) {
            cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
            cb(this.value);
            return;
        }
        // 错误捕获
        try{
            ret = cb(this.value);
            callback.resolve(ret);
        }catch(e){
            callback.reject(e);
        }
}
// resolve方法，执行成功
MyPromise.prototype._resolve = function(result){
    // 判断传递的值是否是promise
    if( result && (typeof result === 'object' || typeof result === 'function' ) ){
        var then = result.then;
        if( typeof then === 'function' ){
            then.call(result,that._resolve);
            return;
        }
    }
    
    this.value = result;
    this.state = 'fulfilled';
    this._execute();
}
// 执行失败的拒绝态，reason为拒因
MyPromise.prototype._reject = function(reason){
    this.value = reason;
    this.state = 'rejected';
    this._execute();
}
// 执行回调函数
MyPromise.prototype._execute = function(){
   var that = this;
    // 加入延时，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.
    setTimeout( function(){
        that.callbacks.forEach(function(callback){
            that._handle(callback);
        });
    },0);
}

上述代码增加了新的reject方法，供异步操作失败时调用，同时抽出了resolve和reject共用的部分，形成execute方法。
好了一个简单的promise对象就实现了。下面我们看一下能不能用？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getRandomNum(){
    return new MyPromise(function(resolve,reject){
        // 异步任务
        setTimeout(function(){
            var randNum = Math.random() * 10;
            if( randNum < 5 ){
                resolve(randNum);    
            }else{
                reject(randNum);
            }
        },5000);
    })
}
console.log('开始执行时间：' + Date.now());
getRandomNum().then(function success(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数小于5，随机数=' + res )
},function fail(res){
    console.log('结束执行时间：' + Date.now());
    console.log('随机数大于5，随机数=' + res )
})

看一下

总结

按照promise/A+规范实现了核心的一些功能，后续如果有需要可以继续再扩展一些其他方法，可以参考一些比较优秀的库如Q.js,bluebird.js等。

扫一扫，分享到微信

微信分享二维码
他们都叫我：彪哥<br> 我也很无助啊！<br> 我的团队叫：Microbot Team<br><br><br>谢谢大家