手写 Promise：实现符合 Promises/A+规范的 Promise

TIP

Promise是 JavaScript 中非常重要的一个概念，它是一种用于处理异步操作的编程模型。Promise提供了一种优雅的方式来处理异步操作的成功或失败，以及它们之间的依赖关系。这使得我们可以避免回调地狱（Callback Hell）的问题，编写更清晰、更易于理解的代码。

Promises/A+是一个对Promise行为的开放规范，它规定了Promise应该如何表现和实现。遵循这个规范的Promise实现可以确保它们之间的互操作性，使得我们可以在不同的库和框架中轻松地使用它们。在本文中，我们将实现一个名为myPromise的类，它将遵循Promises/A+规范。

我们将实现以下功能和方法，使 myPromise 符合 Promises/A+规范：

myPromise 构造函数及基本状态
resolve 和 reject 方法
then方法
catch方法
finally方法
静态方法 resolve、reject、all、race等

完整代码

点击查看代码

class myPromise<T> {
  status: 'pending' | 'fulfilled' | 'rejected'
  value: T | undefined
  reason: any
  onFulfilledCallbacks: Function[]
  onRejectedCallbacks: Function[]
  constructor(executor: (resolve: (value?: any) => void, reject: (reason?: any) => void) => void) {
    // 初始化状态为pending
    this.status = 'pending'
    // 初始化成功的值为undefined
    this.value = undefined
    // 初始化失败的原因为undefined
    this.reason = undefined
    // 初始化成功处理函数队列
    this.onFulfilledCallbacks = []
    // 初始化失败处理函数队列
    this.onRejectedCallbacks = []

    // 定义resolve方法
    const resolve = (value: T | undefined) => {
      // 只有在pending状态才能更改状态和值
      if (this.status === 'pending') {
        this.status = 'fulfilled'
        this.value = value
        // 执行所有成功处理函数
        this.onFulfilledCallbacks.forEach((callback) => callback())
      }
    }

    // 定义reject方法
    const reject = (reason: any) => {
      // 只有在pending状态才能更改状态和原因
      if (this.status === 'pending') {
        this.status = 'rejected'
        this.reason = reason
        // 执行所有失败处理函数
        this.onRejectedCallbacks.forEach((callback) => callback())
      }
    }

    // 立即执行执行器函数
    try {
      executor(resolve, reject)
    } catch (error) {
      // 如果执行器函数抛出异常，将Promise状态更改为rejected
      reject(error)
    }
  }
  then(
    onFulfilled?: (value: T | undefined) => T | void,
    onRejected?: (reason: any) => any
  ): myPromise<T> {
    // 如果不传处理函数，则使用默认处理函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value
    onRejected =
      typeof onRejected === 'function'
        ? onRejected
        : (reason) => {
            throw reason
          }

    // 创建一个新的Promise实例，称为promise2
    const promise2 = new myPromise<T>((resolve, reject) => {
      if (this.status === 'fulfilled') {
        // 使用setTimeout保证异步调用
        setTimeout(() => {
          try {
            // 调用onFulfilled，并获取返回值
            const x = onFulfilled!(this.value)
            // 使用返回值x和新的Promise实例promise2来处理resolve和reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            // 如果处理函数抛出异常，则将promise2状态更改为rejected
            reject(error)
          }
        })
      } else if (this.status === 'rejected') {
        // 使用setTimeout保证异步调用
        setTimeout(() => {
          if (onRejected) {
            try {
              // 调用onRejected，并获取返回值
              const x = onRejected(this.reason)
              // 使用返回值x和新的Promise实例promise2来处理resolve和reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              // 如果处理函数抛出异常，则将promise2状态更改为rejected
              reject(error)
            }
          }
        })
      } else if (this.status === 'pending') {
        // 如果当前Promise状态仍为pending，将处理函数加入相应的队列中
        this.onFulfilledCallbacks.push(() => {
          // 使用setTimeout保证异步调用
          setTimeout(() => {
            try {
              // 调用onFulfilled，并获取返回值
              const x = onFulfilled!(this.value)
              // 使用返回值x和新的Promise实例promise2来处理resolve和reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              // 如果处理函数抛出异常，则将promise2状态更改为rejected
              reject(error)
            }
          })
        })

        this.onRejectedCallbacks.push(() => {
          // 使用setTimeout保证异步调用
          setTimeout(() => {
            if (onRejected) {
              try {
                // 调用onRejected，并获取返回值
                const x = onRejected(this.reason)
                // 使用返回值x和新的Promise实例promise2来处理resolve和reject
                resolvePromise(promise2, x, resolve, reject)
              } catch (error) {
                // 如果处理函数抛出异常，则将promise2状态更改为rejected
                reject(error)
              }
            }
          })
        })
      }
    })

    // 返回新的Promise实例，以便链式调用
    return promise2
  }
  catch(onRejected: (reason: any) => any) {
    // 调用then方法，仅传入失败处理函数
    return this.then(undefined, onRejected)
  }
  finally(callback: () => any) {
    // 调用then方法，传入两个相同的处理函数
    return this.then(
      (value) => {
        // 创建一个新的Promise实例，确保异步执行callback
        return myPromise.resolve(callback()).then(() => value)
      },
      (reason) => {
        // 创建一个新的Promise实例，确保异步执行callback
        return myPromise.resolve(callback()).then(() => {
          throw reason
        })
      }
    )
  }
  static resolve(value) {
    if (value instanceof myPromise) {
      return value
    }
    return new myPromise((resolve, _reject) => {
      resolve(value)
    })
  }

  static reject(reason) {
    return new myPromise((_resolve, reject) => {
      reject(reason)
    })
  }
  static all(promises) {
    return new myPromise((resolve, reject) => {
      const result = []
      let resolvedCount = 0

      promises.forEach((promise, index) => {
        myPromise.resolve(promise).then(
          (value) => {
            result[index] = value
            resolvedCount++
            if (resolvedCount === promises.length) {
              resolve(result)
            }
          },
          (reason) => {
            reject(reason)
          }
        )
      })
    })
  }

  static race(promises) {
    return new myPromise((resolve, reject) => {
      promises.forEach((promise) => {
        myPromise.resolve(promise).then(
          (value) => {
            resolve(value)
          },
          (reason) => {
            reject(reason)
          }
        )
      })
    })
  }
  static any(promises) {
    return new myPromise((resolve, reject) => {
      const errors = []
      let rejectedCount = 0

      promises.forEach((promise, index) => {
        myPromise.resolve(promise).then(
          (value) => {
            resolve(value)
          },
          (reason) => {
            errors[index] = reason
            rejectedCount++
            if (rejectedCount === promises.length) {
              reject(new AggregateError(errors, 'All promises were rejected'))
            }
          }
        )
      })
    })
  }
}

function resolvePromise<T>(
  promise2: myPromise<T>,
  x: any,
  resolve: (value?: any) => void,
  reject: (reason?: any) => void
) {
  // 1. 如果 promise2 和 x 相同，抛出 TypeError
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'))
  }

  // 标记是否已调用，防止多次调用
  let called = false

  // 2. 如果 x 是 myPromise 实例
  if (x instanceof myPromise) {
    // 根据 x 的状态调用 resolve 或 reject
    x.then(
      (y) => {
        resolvePromise(promise2, y, resolve, reject)
      },
      (reason) => {
        reject(reason)
      }
    )
  } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    // 3. 如果 x 是对象或函数
    try {
      // 获取 x 的 then 方法
      const then = x.then
      if (typeof then === 'function') {
        // 如果 then 是函数
        // 使用 x 作为上下文调用 then 方法
        then.call(
          x,
          (y) => {
            // 成功回调
            if (called) return // 如果已经调用过，直接返回
            called = true
            // 递归处理 y
            resolvePromise(promise2, y, resolve, reject)
          },
          (reason) => {
            // 失败回调
            if (called) return // 如果已经调用过，直接返回
            called = true
            reject(reason)
          }
        )
      } else {
        // 如果 then 不是函数
        // 直接调用 resolve
        resolve(x)
      }
    } catch (error) {
      // 如果获取或调用 then 方法抛出异常
      if (called) return // 如果已经调用过，直接返回
      called = true
      reject(error)
    }
  } else {
    // 4. 如果 x 不是对象或函数
    // 直接调用 resolve
    resolve(x)
  }
}

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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288

测试

// 示例用法
const myCustomPromise = new myPromise<string>((resolve, reject) => {
  setTimeout(() => {
    resolve('Custom Promise Resolved')
  }, 2000)
})

myCustomPromise
  .then((value) => {
    console.log(value) // 输出: Custom Promise Resolved
  })
  .catch((error) => {
    console.error(error)
  })

手写 Promise：实现符合 Promises/A+规范的 Promise ​

完整代码 ​

测试 ​

手写 Promise：实现符合 Promises/A+规范的 Promise

完整代码

测试