Promise实现resolve/reject/then/all/race/finally/catch

promise实现基本思路和基本原理:
1.Promise三种状态Pending-等待 Fulfilled-成功 Rejected-失败
2.Promise中的状态使用resolve和reject 2个函数改变状态 并且是不可逆
3.executer如果有错误代码 那么Promise的状态会修改为rejected状态
4.Promise传入一个参数executer执行器,有两个参数分别是resolve和reject函数
5.then方法传入两个参数,分别是onFulfilled和onReject两个函数,当Promise内部状态改变时,调用相关状态回调函数
6.多次调用then方法思路：
(1) 多次调用then方法,应该把onFulfilled和onReject方法缓存
(2) 当Promise状态改变时,去触发相应状态缓存的方法
(3) 发布订阅模式
7.then实现链式调用
(1) 链式调用返回一个Promise
(2) then如果返回是一个普通值,那么作为下一个then的结果
(3) then抛出异常 那么作为下一个then的失败结果
(4) then返回是一个Promise 需要等待这个Promise执行完
8.catch的实现,其实就是将then方法中的第二个参数onReject实现报错调用
9.finally的实现,无论是成功还是失败都会调用执行
10.Promise.all 原理：当传入的数组每一个promise调用结果状态都是成功,那么返回一个数组包含入参返回值
11.Promise.race 原理：当传入的数组每一个promise调用,返回值由最快改变状态的Promise决定

代码实现

1.定义Promise三种状态和调用executer函数执行，定义status、value 、callbacks 等类成员变量,处理有可能报错

class MyPromise {
	 static PENDING = 'pending';
	  static FULFILLED = 'fulfilled';
	  static REJECTED = 'rejected';
	  
	 constructor(executer) {
	    //初始状态
	    this.status = MyPromise.PENDING;
	    //初始值
	    this.value = null;
	    //等待状态成功和失败函数暂时存放起来
	    this.callbacks = [];
	
	    //传入的函数 resolve 和 reject参数
	    try {
	      executer(this.resolve.bind(this), this.reject.bind(this));
	    } catch (error) {
	      this.reject.bind(this, error);
	    }
	  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.实现类resolve和reject方法

 resolve(val) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.FULFILLED;
      this.value = val;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onFulfilled(val);
        });
      });
    }
  }

  reject(reason) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.REJECTED;
      this.value = reason;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onReject(reason);
        });
      });
    }
  }

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

3.实现类then的方法和链式调用

then(
    onFulfilled = (val) => val,
    onReject = (reason) => {
      throw reason;
    }
  ) {
    const promise = new MyPromise((resolve, reject) => {
      switch (this.status) {
        //等待状态
        case MyPromise.PENDING:
          this.callbacks.push({
            onFulfilled: (val) => {
              try {
                const res = onFulfilled(val);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
            onReject: (reason) => {
              try {
                const res = onReject(reason);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
          });
          break;

        //成功状态
        case MyPromise.FULFILLED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const res = onFulfilled(this.value);
              this.resolvePromise(promise, res, resolve, reject);
            } catch (error) {
              reject(error);
            }
          });

          break;
        //失败状态
        case MyPromise.REJECTED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const resErr = onReject(this.value);
              //这里注意 上一步的是reject状态 下一个链式then接收结果是resolve接收
              resolve(resErr);
            } catch (error) {
              reject(error);
            }
          });
          break;
      }
    });
    //返回一个promise实例
    return 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

4.实现类catch的方法

 catch(onReject) {
    return this.then(undefined, onReject);
  }
1
2
3

5.实现类finally的方法

  //成功和失败都会执行
  finally(callback) {
    return this.then(
      (val) => {
        return MyPromise.resolve(callback()).then(() => val);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => reason);
      }
    );
  }
1
2
3
4
5
6
7
8
9
10
11

6.实现类then核心代码复用逻辑resolvePromise

//then核心代码复用逻辑
  resolvePromise(p, res, resolve, reject) {
    //不能重复传入同一个Promise
    if (p === res) throw new TypeError('Chaining cycle detected');

    try {
      // 返回结果是一个promise对象 那么直接调用then
      if (res instanceof MyPromise) {
        res.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      } else {
        resolve(res);
      }
    } catch (error) {
      reject(error);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7.实现静态方法resolve

//静态resolve 返回一个promise 执行resolve方法
  static resolve(val) {
    return new MyPromise((resolve, reject) => {
      if (val instanceof MyPromise) {
        val.then(resolve, reject);
      } else {
        resolve(val);
      }
    });
  }
1
2
3
4
5
6
7
8
9
10

8.实现静态方法reject

//静态resolve 返回一个promise 执行reject方法
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }
1
2
3
4
5
6

9.静态all方法 数组所有promise都请求成功才返回resolve 有一个失败就直接reject返回

static all(promiseArr) {
    const values = [];

    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => {
            values.push(val);

            if (values.length === promiseArr.length) {
              resolve(values);
            }
          },
          (reason) => reject(reason)
        );
      });
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

10.静态race方法 不管是resolve还是reject谁先调用就执行谁 只会执行第一个成功的

 static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      });
    });
  }
1
2
3
4
5
6
7
8
9
10

结尾附上完整版代码,为了测试不和原生的Promise名字冲突,此处名字用MyPromise。

class MyPromise {
  static PENDING = 'pending';
  static FULFILLED = 'fulfilled';
  static REJECTED = 'rejected';

  constructor(executer) {
    //初始状态
    this.status = MyPromise.PENDING;
    //初始值
    this.value = null;
    //等待状态成功和失败函数暂时存放起来
    this.callbacks = [];

    //传入的函数 resolve 和 reject参数
    try {
      executer(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject.bind(this, error);
    }
  }

  resolve(val) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.FULFILLED;
      this.value = val;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onFulfilled(val);
        });
      });
    }
  }

  reject(reason) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.REJECTED;
      this.value = reason;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onReject(reason);
        });
      });
    }
  }

  then(
    onFulfilled = (val) => val,
    onReject = (reason) => {
      throw reason;
    }
  ) {
    const promise = new MyPromise((resolve, reject) => {
      switch (this.status) {
        //等待状态
        case MyPromise.PENDING:
          this.callbacks.push({
            onFulfilled: (val) => {
              try {
                const res = onFulfilled(val);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
            onReject: (reason) => {
              try {
                const res = onReject(reason);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
          });
          break;

        //成功状态
        case MyPromise.FULFILLED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const res = onFulfilled(this.value);
              this.resolvePromise(promise, res, resolve, reject);
            } catch (error) {
              reject(error);
            }
          });

          break;
        //失败状态
        case MyPromise.REJECTED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const resErr = onReject(this.value);
              //这里注意 上一步的是reject状态 下一个链式then接收结果是resolve接收
              resolve(resErr);
            } catch (error) {
              reject(error);
            }
          });
          break;
      }
    });
    //返回一个promise实例
    return promise;
  }

  //返回失败的结果
  catch(onReject) {
    return this.then(undefined, onReject);
  }

  //成功和失败都会执行
  finally(callback) {
    return this.then(
      (val) => {
        return MyPromise.resolve(callback()).then(() => val);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => reason);
      }
    );
  }

  //then核心代码复用逻辑
  resolvePromise(p, res, resolve, reject) {
    //不能重复传入同一个Promise
    if (p === res) throw new TypeError('Chaining cycle detected');

    try {
      // 返回结果是一个promise对象 那么直接调用then
      if (res instanceof MyPromise) {
        res.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      } else {
        resolve(res);
      }
    } catch (error) {
      reject(error);
    }
  }

  //静态resolve 返回一个promise 执行resolve方法
  static resolve(val) {
    return new MyPromise((resolve, reject) => {
      if (val instanceof MyPromise) {
        val.then(resolve, reject);
      } else {
        resolve(val);
      }
    });
  }

  //静态resolve 返回一个promise 执行reject方法
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  /* 
    Promise.all和Promise.race的实现原理：
    Promise.all 原理：当传入的数组每一个promise调用结果状态都是成功,那么返回一个数组包含入参返回值
    Promise.race 原理：当传入的数组每一个promise调用,返回值由最快改变状态的Promise决定
  */
  //静态all方法 数组所有promise都请求成功才返回resolve 有一个失败就直接reject返回
  static all(promiseArr) {
    const values = [];

    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => {
            values.push(val);

            if (values.length === promiseArr.length) {
              resolve(values);
            }
          },
          (reason) => reject(reason)
        );
      });
    });
  }
  //静态race方法 不管是resolve还是reject谁先调用就执行谁 只会执行第一个成功的
  static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      });
    });
  }
}
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204