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
function Promise(fn) {
    var doneList = [];
    var failList = [];
    var state = 'pending';
    var value;
    //注册回调函数 为什么要加入状态机制呢，因为如果当前的fn已经执行完成了，再去用
    //then绑定回调，就不会执行了，所以加入状态之后，即使已经运行完成也会继续执行回调函数
    this.then = (done, fail) => {
            switch (state) {
                case 'pending':
                    doneList.push(done);
                    failList.push(fail);
                    return this;
                    break;
                case 'fulfilled':
                    done(value);
                    return this;
                    break;
                case 'rejected':
                    fail(value);
                    return this;
                    break;
            }
        }
    //更改对象状态为‘resolved’并执行成功回调
    function resolve(newValue) {
        value = newValue;
        state = 'fulfilled';
        //使用setTimeout的原因是如果fn不是异步的，在fn瞬间运行完成，resolve也会立刻运行，
        //但是这时候doneList还是空的，所以我们要等待then添加完成，使用setTiemout强行将
        //函数的运行放到第一次循环之后运行
        setTimeout(function() {
            doneList.forEach(done => {
                done(newValue);
            })
        }, 0);
    }
    //更改对象状态为‘rejected’并执行失败回调
    function reject(err) {
        value = err;
        state = 'rejected';
        setTimeout(function() {
            failList.forEach(fail => {
                fail(err);
            })
        }, 0);
    }
    fn(resolve, reject);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var p = new Promise((resolve, reject) => {
    setTimeout(function(){
      console.log('done');
      //resolve('messsage');
      reject('fail');
    },3000)
})
p.then(function(message){
  console.log('then1:',message);
},function(err){
  console.log('then1err:',err);
}).then(function(message){
  console.log('then2:',message);
},function(err){
  console.log('then2err:',err);
})