手写Promise

Promise是一个异步编程的解决方案。

之前的方案是回调函数的方式。优点是指定回调函数的位置更灵活，和解决了回调地狱问题。

规范是Promise A+。

下面手写实现一遍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
 
(function (window) {
  // 三个状态常量
  const PENDING = 'pending', // 等待
    FULFILLED = 'fulfilled', // 成功
    REJECTED = 'rejected';   // 失败
  /**
   * Promise 类
   * @param {Function} excutor 执行器
   */
  function Promise(excutor) {
    // 初始化状态
    this.state = PENDING;
    // 存储数据
    this.data = null;
    // 存储.then的回调函数 {onFulfilled, onRejected}
    // 可能多次.then，所以是一个数据
    this.callbacks = [];

    /**
     * resolve 成功函数
     * @param {*} value 成功的数据
     */
    function resolve(value) {}

    /**
     * reject 失败函数
     * @param {*} reason 失败的原因
     */
    function reject(reason) {}
    try {
      excutor(resolve, reject); // 立即执行 执行器函数
    } catch (error) {
      reject(error); // 异常就直接抛出
    }
  }

  /**
   * 原型对象上的then方法
   * @param {Function} onFulfilled 获取成功的回调函数
   * @param {Function} onRejected 获取失败的回调函数
   * @returns {Promise} 新的Promise对象
   */
  Promise.prototype.then = function (onFulfilled, onRejected) {}

  /**
   * 原型对象上的catch方法
   * @param {Function} onRejected 获取失败的回调函数
   * @returns {Promise} 新的Promise对象
   */
  Promise.prototype.catch = function (onRejected) {}

  /**
   * Promise函数对象的resolve方法
   * @param {*} value 
   */
  Promise.resolve = function (value) {}

  /**
   * Promise函数对象的reject方法
   * @param {*} reason 
   */
  Promise.reject = function (reason) {}

  /**
   * Promise函数对象的all方法
   * 所有成功才成功，只要一个失败则失败
   */
  Promise.all = function (promises) {}

  /**
   * Promise函数对象的race方法
   * 第一个结束的 成功则成功 失败则失败
   */
  Promise.race = function (promises) {};

  window.Promise = Promise;
})(window); // IIEF

执行器的resolve

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/**
 * resolve 成功函数
 * @param {*} value 成功的数据
 */
resolve = value => {
  // 检查状态，保证状态只能改变一次
  if (this.state !== PENDING) {
    return;
  }
  // 改状态
  this.state = FULFILLED;
  // 存数据
  this.data = value;
  // 检查回调，如果有，立即执行回调函数
  if (this.callbacks.length > 0) {
    setTimeout(() => {
      this.callbacks.forEach(callbackObj => {
        callbackObj.onFulfilled(this.data);
      });
    });
  }
}

执行器的reject,

复制粘贴resolve，改状态、名字即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/**
 * reject 失败函数
 * @param {*} reason 失败的原因
 */
reject = reason => {
  // 查状态，保证状态只能改变一次
  if (this.state !== PENDING) {
    return;
  }
  // 改状态
  this.state = REJECTED;
  // 存数据
  this.data = reason;
  // 检查回调，如果有，立即执行回调函数
  if (this.callbacks.length > 0) {
    setTimeout(() => {
      this.callbacks.forEach(callbackObj => {
        callbackObj.onRejected(this.data);
      });
    });
  }
}

原型对象上的then 方法

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
 
/**
 * 原型对象上的then方法
 * @param {Function} onFulfilled 获取成功的回调函数
 * @param {Function} onRejected 获取失败的回调函数
 * @returns {Promise} 新的Promise对象
 */
Promise.prototype.then = function (onFulfilled, onRejected) {
  // 保存当前Promise的this
  const that = this;
  // 返回一个新的Promise
  return new Promise((resolve, reject) => {
    if (that.state = FULFILLED) {
      // 立即异步执行成功的回调函数
      setTimeout(() => {
        /**
        * 返回Promise的结果由onFulfilled或onRejected执行结果决定
        * 情况1.抛出异常 返回Promise的结果为异常，reason为异常
        * 情况2.返回的是Promise，返回Promise的结果就是这个Promise的结果
        * 情况3.返回的不是Promise，返回的Promise为成功，value就是返回值
        */
        try {
          const result = onFulfilled(that.data);
          if (result instanceof Promise) {
            // 情况2
            result.then(resolve, reject);
          } else {
            // 情况3
            resolve(result);
          }
        } catch (error) {
          // 情况1
          reject(error);
        }
      });
    } else if (that.state = REJECTED) {
      // 立即异步执行失败的回调函数
      setTimeout(() => {
        /**
        * 返回Promise的结果由onFulfilled或onRejected执行结果决定
        * 情况1.抛出异常 返回Promise的结果为异常，reason为异常
        * 情况2.返回的是Promise，返回Promise的结果就是这个Promise的结果
        * 情况3.返回的不是Promise，返回的Promise为成功，value就是返回值
        */
        try {
          const result = onRejected(that.data);
          if (result instanceof Promise) {
            // 情况2
            result.then(resolve, reject);
          } else {
            // 情况3
            resolve(result);
          }
        } catch (error) {
          // 情况1
          reject(error);
        }
      });
    } else { // that.state = PENDING
      // 保存回调函数到callbacks中去
      // that.callbacks.push({
      //   onFulfilled, onRejected
      // }); // 直接赋值onFulfilled, onRejected
      // 没有机会改变Promise的状态，所以要像成功失败那样再包一层函数
      that.callbacks.push({
        onFulfilled: handle(onFulfilled),
        onRejected: handle(onRejected)
      });
    }
  });
}

封装handle

在.then方式中成功和失败的处理很类似，所以封装出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
const handle = callback => {
  /**
   * 返回Promise的结果由onFulfilled或onRejected执行结果决定
   * 情况1.抛出异常 返回Promise的结果为异常，reason为异常
   * 情况2.返回的是Promise，返回Promise的结果就是这个Promise的结果
   * 情况3.返回的不是Promise，返回的Promise为成功，value就是返回值
   */
  try {
    const result = callback(that.data);
    if (result instanceof Promise) {
      // 情况2
      result.then(resolve, reject);
    } else {
      // 情况3
      resolve(result);
    }
  } catch (error) {
    // 情况1
    reject(error);
  }
}

优化后的then方法

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
 
/**
 * 原型对象上的then方法
 * @param {Function} onFulfilled 获取成功的回调函数
 * @param {Function} onRejected 获取失败的回调函数
 * @returns {Promise} 新的Promise对象
 */
Promise.prototype.then = function (onFulfilled, onRejected) {
  // 设置回调函数默认值（必须是函数），Promise继续传递的保障
  onResolved = typeof onResolved === 'function' ? onResolved : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

  // 保存当前Promise的this
  const that = this;
  // 返回一个新的Promise
  return new Promise((resolve, reject) => {
    const handle = callback => {
      /**
       * 返回Promise的结果由onFulfilled或onRejected执行结果决定
       * 情况1.抛出异常 返回Promise的结果为异常，reason为异常
       * 情况2.返回的是Promise，返回Promise的结果就是这个Promise的结果
       * 情况3.返回的不是Promise，返回的Promise为成功，value就是返回值
       */
      try {
        const result = callback(that.data);
        if (result instanceof Promise) {
          // 情况2
          result.then(resolve, reject);
        } else {
          // 情况3
          resolve(result);
        }
      } catch (error) {
        // 情况1
        reject(error);
      }
    }
    if (that.state = FULFILLED) {
      // 立即异步执行成功的回调函数
      setTimeout(() => {
        handle(onFulfilled);
      });
    } else if (that.state = REJECTED) {
      // 立即异步执行失败的回调函数
      setTimeout(() => {
        handle(onRejected);
      });
    } else { // that.state = PENDING
      // 保存回调函数到callbacks中去
      that.callbacks.push({
        onFulfilled: handle(onFulfilled),
        onRejected: handle(onRejected)
      });
    }
  });
}

原型对象上的catch方法

1
2
3
4
5
6
7
8
 
/**
 * 原型对象上的catch方法
 * @param {Function} onRejected 获取失败的回调函数
 * @returns {Promise} 新的Promise对象
 */
Promise.prototype.catch = function (onFulfilled, onRejected) {
  return this.then(undefined, onRejected);
}

函数对象上的resolve和reject方法

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
 
/**
 * Promise函数对象的resolve方法
 * 如果收到的是个Promise对象，那么传递下去
 * 如果是一个值，就直接返回值
 * @param {*} value
 * @returns Promise
 */
Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      value.then(resolve, reject);
    } else {
      resolve(value);
    }
  })
}

/**
 * Promise函数对象的reject方法
 * @param {*} reason 
 * @returns Promise
 */
Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason);
  });
}

函数对象上的all和race方法

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
 
/**
 * Promise函数对象的all方法
 * 所有成功才成功，只要一个失败则失败
 * @param {Array<Promise>} promises promise的数组
 */
Promise.all = function (promises) {
  // 定义返回结果数组的长度，因为返回的数组要按照传入的数组
  const values = new Array(promises.length);
  // 计算器变量，保证 所有成功才成功
  let resolvedCount = 0;
  return new Promise((resolve, reject) => {
    promises.forEach((promise, index) => {
      P.resolve(promise).then(
        value => {
          // 计数器增加
          resolvedCount++;
          // 按数组顺序 塞进返回结果数组
          values[index] = value;
          if (resolvedCount === promises.length) {
            resolve(values);
          }
        },
        reason => {
          reject(reason);
        }
      );
    });
  });
}

/**
 * Promise函数对象的race方法
 * 第一个结束的 成功则成功 失败则失败
 * @param {Array<Promise>} promises promise的数组
 */
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    promises.forEach(promise => {
      Promise.resolve(promise).then(
        value => {
          resolve(value);
        },
        reason => {
          reject(reason);
        }
      );
    });
  });
};

完整的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
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
205
206
207
208
209
210
211
212
213
214
215
 
(function (window) {
  // 三个状态常量
  const PENDING = 'pending', // 等待
    FULFILLED = 'fulfilled', // 成功
    REJECTED = 'rejected';   // 失败
  /**
   * Promise 类
   * @param {Function} excutor 执行器
   */
  const Promise = (excutor) => {
    // 初始化状态
    this.state = PENDING;
    // 存储数据
    this.data = null;
    // 存储.then的回调函数 {onFulfilled, onRejected}
    // 可能多次.then，所以是一个数据
    this.callbacks = [];

    /**
     * resolve 成功函数
     * @param {*} value 成功的数据
     */
    resolve = value => {
      // 检查状态，保证状态只能改变一次
      if (this.state !== PENDING) {
        return;
      }
      // 改状态
      this.state = FULFILLED;
      // 存数据
      this.data = value;
      // 检查回调，如果有，立即执行回调函数
      if (this.callbacks.length > 0) {
        setTimeout(() => {
          this.callbacks.forEach(callbackObj => {
            callbackObj.onFulfilled(this.data);
          });
        });
      }
    }

    /**
     * reject 失败函数
     * @param {*} reason 失败的原因
     */
    reject = reason => {
      // 查状态，保证状态只能改变一次
      if (this.state !== PENDING) {
        return;
      }
      // 改状态
      this.state = REJECTED;
      // 存数据
      this.data = reason;
      // 检查回调，如果有，立即执行回调函数
      if (this.callbacks.length > 0) {
        setTimeout(() => {
          this.callbacks.forEach(callbackObj => {
            callbackObj.onRejected(this.data);
          });
        });
      }
    }
    try {
      excutor(resolve, reject); // 立即执行 执行器函数
    } catch (error) {
      reject(error); // 异常就直接抛出
    }
  }

  /**
   * 原型对象上的then方法
   * @param {Function} onFulfilled 获取成功的回调函数
   * @param {Function} onRejected 获取失败的回调函数
   * @returns {Promise} 新的Promise对象
   */
  Promise.prototype.then = function (onFulfilled, onRejected) {
    // 设置回调函数默认值（必须是函数），Promise继续传递的保障
    onResolved = typeof onResolved === 'function' ? onResolved : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };

    // 保存当前Promise的this
    const that = this;
    // 返回一个新的Promise
    return new Promise((resolve, reject) => {
      const handle = callback => {
        /**
         * 返回Promise的结果由onFulfilled或onRejected执行结果决定
         * 情况1.抛出异常 返回Promise的结果为异常，reason为异常
         * 情况2.返回的是Promise，返回Promise的结果就是这个Promise的结果
         * 情况3.返回的不是Promise，返回的Promise为成功，value就是返回值
         */
        try {
          const result = callback(that.data);
          if (result instanceof Promise) {
            // 情况2
            result.then(resolve, reject);
          } else {
            // 情况3
            resolve(result);
          }
        } catch (error) {
          // 情况1
          reject(error);
        }
      }
      if (that.state = FULFILLED) {
        // 立即异步执行成功的回调函数
        setTimeout(() => {
          handle(onFulfilled);
        });
      } else if (that.state = REJECTED) {
        // 立即异步执行失败的回调函数
        setTimeout(() => {
          handle(onRejected);
        });
      } else { // that.state = PENDING
        // 保存回调函数到callbacks中去
        that.callbacks.push({
          onFulfilled: handle(onFulfilled),
          onRejected: handle(onRejected)
        });
      }
    });
  }

  /**
   * 原型对象上的catch方法
   * @param {Function} onRejected 获取失败的回调函数
   * @returns {Promise} 新的Promise对象
   */
  Promise.prototype.catch = function (onFulfilled, onRejected) {
    return this.then(undefined, onRejected);
  }

  /**
   * Promise函数对象的resolve方法
   * 如果收到的是个Promise对象，那么传递下去
   * 如果是一个值，就直接返回值
   * @param {*} value
   * @returns Promise
   */
  Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    })
  }

  /**
   * Promise函数对象的reject方法
   * @param {*} reason 
   * @returns Promise
   */
  Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  }

  /**
   * Promise函数对象的all方法
   * 所有成功才成功，只要一个失败则失败
   * @param {Array<Promise>} promises promise的数组
   */
  Promise.all = function (promises) {
    // 定义返回结果数组的长度，因为返回的数组要按照传入的数组
    const values = new Array(promises.length);
    // 计算器变量，保证 所有成功才成功
    let resolvedCount = 0;
    return new Promise((resolve, reject) => {
      promises.forEach((promise, index) => {
        P.resolve(promise).then(
          value => {
            // 计数器增加
            resolvedCount++;
            // 按数组顺序 塞进返回结果数组
            values[index] = value;
            if (resolvedCount === promises.length) {
              resolve(values);
            }
          },
          reason => {
            reject(reason);
          }
        );
      });
    });
  }

  /**
   * Promise函数对象的race方法
   * 第一个结束的 成功则成功 失败则失败
   * @param {Array<Promise>} promises promise的数组
   */
  Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
      promises.forEach(promise => {
        Promise.resolve(promise).then(
          value => {
            resolve(value);
          },
          reason => {
            reject(reason);
          }
        );
      });
    });
  };

  window.Promise = Promise;
})(window); // IIEF
posted @ 2021-03-18 21:59  李海家  阅读(45)  评论(0)  编辑  收藏  举报