手写Promise - Ocean Han

TIP
这篇文章主要整理如何自己实现Promise，详细介绍和用法已经有很多比较好的文档了，就不在此整理了

1. Promise声明🍒#

1
class MyPromise {
2
    // 构造器
3
    constructor(executor) {
4
      // 成功
5
      let resolve = () => {};
6
      // 失败
7
      let reject = () => {};
8
      // 立即执行
9
      executor(resolve,reject);
10
    }
11
}

2. 定义基本状态🍒#

1
class MyPromise {
2
    // 构造器
3
    constructor(executor) {
4
        // 初始化state为pending
5
        this.state = 'pending';
6
        // 成功的值
7
        this.value = undefined;
8
        // 失败的值
9
        this.reason = undefined;
10
        let resolve = value => {
11
            if(this.state === 'pending'){
12
                this.state = 'fulfilled';
13
                this.value = value;
14
            }
15
        }
16
        let reject = reason => {
17
            if(this.state === 'pending'){
18
                this.state = 'rejected';
19
                this.reason = reason;
20
            }
21
        }
22
        try {
23
            executor(resolve,reject)
24
        } catch (error) {
25
            reject(error)
26
        }
27
    }
28
}

3. 定义then()方法🍒#

1
class MyPromise {
2
    constructor(executor) {...}
3

4
    then(onFulfilled,onRejected) {
5
        if(this.state === 'fulfilled'){
6
            onFulfilled(this.value);
7
        }
8
        if(this.state === 'rejected'){
9
            onRejected(this.reason);
10
        }
11
    }
12
}

4. 实现异步🍒#

如果是异步操作，执行then时state还是pending等待状态，所以需要在then调用时，将成功和失败存到各自的数组，一旦resolve或reject就调用他们

1
class MyPromise{
2
  constructor(executor){
3
    this.state = 'pending';
4
    this.value = undefined;
5
    this.reason = undefined;
6
    // 成功存放的数组
7
    this.onResolvedCallbacks = [];
8
    // 失败存放法数组
9
    this.onRejectedCallbacks = [];
10
    let resolve = value => {
11
      if (this.state === 'pending') {
12
        this.state = 'fulfilled';
13
        this.value = value;
14
        // 一旦resolve执行，调用成功数组的函数
15
        this.onResolvedCallbacks.forEach(fn=>fn());
16
      }
17
    };
18
    let reject = reason => {
19
      if (this.state === 'pending') {
20
        this.state = 'rejected';
21
        this.reason = reason;
22
        // 一旦reject执行，调用失败数组的函数
23
        this.onRejectedCallbacks.forEach(fn=>fn());
24
      }
25
    };
26
    try{
27
      executor(resolve, reject);
28
    } catch (err) {
29
      reject(err);
30
    }
31
  }
32
  then(onFulfilled,onRejected) {
33
    if (this.state === 'fulfilled') {
34
      onFulfilled(this.value);
35
    };
36
    if (this.state === 'rejected') {
37
      onRejected(this.reason);
38
    };
39
    // 当状态state为pending时
40
    if (this.state === 'pending') {
41
      // onFulfilled传入到成功数组
42
      this.onResolvedCallbacks.push(()=>{
43
        onFulfilled(this.value);
44
      })
45
      // onRejected传入到失败数组
46
      this.onRejectedCallbacks.push(()=>{
47
        onRejected(this.reason);
48
      })
49
    }
50
  }
51
}

5. 实现链式调用🍒#

为了避免回调地狱,我们常常用到 new Promise().then().then(),也就是链式调用

这里的resolvePromise()方法用来判断x(即第一个then的返回值)

1
class MyPromise{
2
  constructor(executor){
3
    this.state = 'pending';
4
    this.value = undefined;
5
    this.reason = undefined;
6
    this.onResolvedCallbacks = [];
7
    this.onRejectedCallbacks = [];
8
    let resolve = value => {
9
      if (this.state === 'pending') {
10
        this.state = 'fulfilled';
11
        this.value = value;
12
        this.onResolvedCallbacks.forEach(fn=>fn());
13
      }
14
    };
15
    let reject = reason => {
16
      if (this.state === 'pending') {
17
        this.state = 'rejected';
18
        this.reason = reason;
19
        this.onRejectedCallbacks.forEach(fn=>fn());
20
      }
21
    };
22
    try{
23
      executor(resolve, reject);
24
    } catch (err) {
25
      reject(err);
26
    }
27
  }
28
  then(onFulfilled,onRejected) {
29
    // 声明返回的promise2
30
    let promise2 = new Promise((resolve, reject)=>{
31
      if (this.state === 'fulfilled') {
32
        let x = onFulfilled(this.value);
33
        // resolvePromise函数，处理自己return的promise和默认的promise2的关系
34
        resolvePromise(promise2, x, resolve, reject);
35
      };
36
      if (this.state === 'rejected') {
37
        let x = onRejected(this.reason);
38
        resolvePromise(promise2, x, resolve, reject);
39
      };
40
      if (this.state === 'pending') {
41
        this.onResolvedCallbacks.push(()=>{
42
          let x = onFulfilled(this.value);
43
          resolvePromise(promise2, x, resolve, reject);
44
        })
45
        this.onRejectedCallbacks.push(()=>{
46
          let x = onRejected(this.reason);
47
          resolvePromise(promise2, x, resolve, reject);
48
        })
49
      }
50
    });
51
    // 返回promise，完成链式
52
    return promise2;
53
  }
54
}

6. 实现 resolvePromise函数🍒#

6.1 循环引用的错误#

如果判断x === promise2,那么就会造成循环引用，也就是自己等待自己完成

1
let p1 = new Promise(resolve => {
2
  resolve(0);
3
});
4
var p2 = p1.then(data => {
5
  // 循环引用，自己等待自己完成，永远无法完成
6
  return p2;
7
})

6.2 完成 resolvePromise方法#

1
// 1. 判断x是不是promise
2
  // 1.1 如果是promise,则取它的结果作为新的promise2成功的结果
3
  // 1.2 如果是普通值，就直接作为promise2成功的结果
4
function resolvePromise(promise2, x, resolve, reject){
5
  // 循环引用报错!
6
  if(x === promise2){
7
    // reject报错
8
    return reject(new TypeError('Chaining cycle detected for promise'));
9
  }
10
  // 定义一个标识，防止多次调用
11
  let called;
12
  // x不是null 且x是对象或者函数
13
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
14
    try {
15
      // A+规定，声明then = x的then方法
16
      let then = x.then;
17
      // 如果then是函数，就默认x是promise了
18
      if (typeof then === 'function') {
19
        // 就让then执行 第一个参数是this   后面是成功的回调 和 失败的回调
20
        then.call(x, y => {
21
          // 成功和失败只能调用一个
22
          if (called) return;
23
          called = true;
24
          // resolve的结果依旧是promise 那就继续解析
25
          resolvePromise(promise2, y, resolve, reject);
26
        }, err => {
27
          // 成功和失败只能调用一个
28
          if (called) return;
29
          called = true;
30
          reject(err);// 失败了就失败了
31
        })
32
      } else {
33
        resolve(x); // 直接成功即可
34
      }
35
    } catch (e) {
36
      // 也属于失败
37
      if (called) return;
38
      called = true;
39
      // 取then出错了那就不要在继续执行了
40
      reject(e);
41
    }
42
  } else {
43
    resolve(x);
44
  }
45
}

7. 解决其他问题🍒#

按规定，onFulfilled,onRejected都是可选参数，如果他们不是函数，必须被忽略

并且onFulfilled或onRejected不能同步被调用，必须异步调用

1
class MyPromise {
2
    constructor(executor){...}
3

4
    then(onFulfilled,onRejected) {
5
        // onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
6
      onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
7
        // onRejected如果不是函数，就忽略onRejected，直接扔出错误
8
      onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
9
        let promise2 = new Promise((resolve, reject) => {
10
        if (this.state === 'fulfilled') {
11
            // 异步
12
            setTimeout(() => {
13
              try {
14
                let x = onFulfilled(this.value);
15
                resolvePromise(promise2, x, resolve, reject);
16
              } catch (e) {
17
                reject(e);
18
              }
19
            }, 0);
20
          };
21
          if (this.state === 'rejected') {
22
            // 异步
23
            setTimeout(() => {
24
              // 如果报错
25
              try {
26
                let x = onRejected(this.reason);
27
                resolvePromise(promise2, x, resolve, reject);
28
              } catch (e) {
29
                reject(e);
30
              }
31
            }, 0);
32
          };
33
          if (this.state === 'pending') {
34
            this.onResolvedCallbacks.push(() => {
35
              // 异步
36
              setTimeout(() => {
37
                try {
38
                  let x = onFulfilled(this.value);
39
                  resolvePromise(promise2, x, resolve, reject);
40
                } catch (e) {
41
                  reject(e);
42
                }
43
              }, 0);
44
            });
45
            this.onRejectedCallbacks.push(() => {
46
              // 异步
47
              setTimeout(() => {
48
                try {
49
                  let x = onRejected(this.reason);
50
                  resolvePromise(promise2, x, resolve, reject);
51
                } catch (e) {
52
                  reject(e);
53
                }
54
              }, 0)
55
            });
56
          };
57
        });
58
        // 返回promise，完成链式
59
        return promise2;
60
    }
61
}

8. 大功告成🍒#

1
class MyPromise{
2
    constructor(executor){
3
      this.state = 'pending';
4
      this.value = undefined;
5
      this.reason = undefined;
6
      this.onResolvedCallbacks = [];
7
      this.onRejectedCallbacks = [];
8
      let resolve = value => {
9
        if (this.state === 'pending') {
10
          this.state = 'fulfilled';
11
          this.value = value;
12
          this.onResolvedCallbacks.forEach(fn=>fn());
13
        }
14
      };
15
      let reject = reason => {
16
        if (this.state === 'pending') {
17
          this.state = 'rejected';
18
          this.reason = reason;
19
          this.onRejectedCallbacks.forEach(fn=>fn());
20
        }
21
      };
22
      try{
23
        executor(resolve, reject);
24
      } catch (err) {
25
        reject(err);
26
      }
27
    }
28
    then(onFulfilled,onRejected) {
29
      onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
30
      onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
31
      let promise2 = new MyPromise((resolve, reject) => {
32
        if (this.state === 'fulfilled') {
33
          setTimeout(() => {
34
            try {
35
              let x = onFulfilled(this.value);
36
              resolvePromise(promise2, x, resolve, reject);
37
            } catch (e) {
38
              reject(e);
39
            }
40
          }, 0);
41
        };
42
        if (this.state === 'rejected') {
43
          setTimeout(() => {
44
            try {
45
              let x = onRejected(this.reason);
46
              resolvePromise(promise2, x, resolve, reject);
47
            } catch (e) {
48
              reject(e);
49
            }
50
          }, 0);
51
        };
52
        if (this.state === 'pending') {
53
          this.onResolvedCallbacks.push(() => {
54
            setTimeout(() => {
55
              try {
56
                let x = onFulfilled(this.value);
57
                resolvePromise(promise2, x, resolve, reject);
58
              } catch (e) {
59
                reject(e);
60
              }
61
            }, 0);
62
          });
63
          this.onRejectedCallbacks.push(() => {
64
            setTimeout(() => {
65
              try {
66
                let x = onRejected(this.reason);
67
                resolvePromise(promise2, x, resolve, reject);
68
              } catch (e) {
69
                reject(e);
70
              }
71
            }, 0)
72
          });
73
        };
74
      });
75
      return promise2;
76
    }
77
    catch(fn){
78
      return this.then(null,fn);
79
    }
80
  }
81
  function resolvePromise(promise2, x, resolve, reject){
82
    if(x === promise2){
83
      return reject(new TypeError('Chaining cycle detected for promise'));
84
    }
85
    let called;
86
    if (x != null && (typeof x === 'object' || typeof x === 'function')) {
87
      try {
88
        let then = x.then;
89
        if (typeof then === 'function') {
90
          then.call(x, y => {
91
            if(called)return;
92
            called = true;
93
            resolvePromise(promise2, y, resolve, reject);
94
          }, err => {
95
            if(called)return;
96
            called = true;
97
            reject(err);
98
          })
99
        } else {
100
          resolve(x);
101
        }
102
      } catch (e) {
103
        if(called)return;
104
        called = true;
105
        reject(e);
106
      }
107
    } else {
108
      resolve(x);
109
    }
110
  }
111
  //resolve方法
112
  MyPromise.resolve = function(val){
113
    return new Promise((resolve,reject)=>{
114
      resolve(val)
115
    });
116
  }
117
  //reject方法
118
  MyPromise.reject = function(val){
119
    return new Promise((resolve,reject)=>{
120
      reject(val)
121
    });
122
  }
123
  //race方法
124
  MyPromise.race = function(promises){
125
    return new Promise((resolve,reject)=>{
126
      for(let i=0;i<promises.length;i++){
127
        promises[i].then(resolve,reject)
128
      };
129
    })
130
  }
131
  //all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
132
  MyPromise.all = function(promises){
133
    let arr = [];
134
    let i = 0;
135
    function processData(index,data){
136
      arr[index] = data;
137
      i++;
138
      if(i == promises.length){
139
        resolve(arr);
140
      };
141
    };
142
    return new Promise((resolve,reject)=>{
143
      for(let i=0;i<promises.length;i++){
144
        promises[i].then(data=>{
145
          processData(i,data);
146
        },reject);
147
      };
148
    });
149
  }

9. 测试🍒#

npm安装promises-aplus-tests插件

加上下方代码

运行 promises-aplus-tests 文件名验证

1
    // 目前是通过他测试 他会测试一个对象
2
    // 语法糖
3
  MyPromise.defer = MyPromise.deferred = function () {
4
        let dfd = {}
5
        dfd.promise = new MyPromise((resolve,reject)=>{
6
          dfd.resolve = resolve;
7
          dfd.reject = reject;
8
        });
9
        return dfd;
10
    }
11
    module.exports = MyPromise;
12
    //npm install promises-aplus-tests 用来测试自己的promise 符不符合promisesA+规范

TIP
如果通过了872个测试点，就大功告成了