Promise/A+

要自己实现 Promise，就绕不开 Promise/A+ 规范，业界主流的 Promise 实现（包括浏览器实现）均实现了该规范。

Promise/A+ 本身规定的内容比较少，这也是我们实现一个简单的 Promise 可以依据的最简单标准了。

首先，解释一些 Promise/A+ 中的术语概念：

promise
promise 是一种行为符合本标准的对象或函数。
thenable
thenable 是定义了 then 方法的对象或函数。
value
value 是任何合法的 JavaScript 值（包含 undefined、thenable 或 promise）。
exception
exception 是使用 throw 语句抛出的值。
reason
reason 是一个描述 promise 因何而 rejected 的值。

基于这些基础属于概念，下面开始解读规范的一些核心要点。

promise 的状态

promise 一共有三种状态，分别为 pending、fulfilled、rejected，根据所处状态，有对应的规则：

当 promise 处于 pending 状态，可以转换为 fulfilled 或 rejected。
当 promise 处于 fulfilled 状态，状态就不能再变化了，并且必须拥有一个不可变的 value（指对象引用地址不变，对象的属性还是允许改变的）。
当 promise 处于 rejected 状态，状态也不能变化了，并且必须拥有一个不可变的 reason（不可变限制同上）。

then 方法

规范要求 promise 必须提供 then 方法。

因为 then 是规范中用来访问 promise 的结果值或者拒绝的原因的唯一途径。

then 方法接受两个可选的参数：

1
promise.then(onFulfilled, onRejected)

关于 onFulfilled:

如果不是一个函数，必须被忽略（忽略的意思是，将结果值直接往后面传递，不做处理）。
如果是一个函数，那么将在 promise fulfilled 之后调用，调用的参数为 promise 的结果值。注意需要确保 onFulfilled 不会在 promise fulfilled 之前被调用，且需要确保不会被调用一次以上。

关于 onRejected:

如果不是一个函数，必须被忽略（忽略的意思是，将 reason 继续往后面抛，不做处理）
如果是一个函数，那么将在 promise rejected 之后调用，调用的参数为 promise 的 reason。注意需要确保 onRejected 不会再 promise rejected 之前被调用，且需要确保不会被调用一次以上。

以上两个回调，都要作为函数调用（没有 this 值），并且在执行上下文栈中仅包含平台代码之前不能被调用，在实践上，这要求 onFulfilled 和 onRejected 异步执行。浏览器的 Promise 实现中，它们是作为“微任务”执行的，但是规范中并不做这个要求，也可以实现为事件循环中的“任务”，例如使用 setTimeout 或 setImmediate 来实现。如果要使用“微任务”，可以考虑使用 MutationObserver 或 process.nextTick 来实现。

关于事件循环以及任务、微任务相关内容，可以阅读我的另一篇博文：浏览器的事件循环机制
关于 MutationObserver，可以阅读：使用 MutationObserver 监视 DOM 变化

以上就是通过 then 访问 value 或 reason 的方式，then 的调用，本身会返回一个新的 promise。

注意 then 可以被多次调用，多次调用将返回独立的 promise 实例。当 promise fulfilled 或 rejected 时，多个 onFulfilled 或 onRejected 回调将按照它们所属的 then 调用的顺序来执行。

对于 then 返回的 promise 的状态转换规则，有几条规则需要了解，以下面的例子说明：

1
promise2 = promise1.then(onFulfilled, onRejected)

如果 onFulfilled 或 onRejected 返回了一个 value x，此时将执行 promise2 的决议过程（Resolution Procedure）逻辑，后面详述。
如果 onFulfilled 或 onRejected 抛出了一个异常 e，那么 promise2 必须以 e 作为 reason 被 rejected。
如果 onFulfilled 不是一个函数，并且 promise1 已经 fulfilled，那么 promise2 必须以 promise1 相同的 value 被 fulfilled。
如果 onRejected 不是一个函数，并且 promise1 已经 rejected，那么 promise2 必须以 promise1 相同的 reason 被 rejected。

promise 的决议过程（Resolution Procedure）

这部分是 promise 的核心也是难点部分。

下面以 [[Resolve]](promise, x) 这个抽象操作表示以 x 作为 value 决议 promise 的过程。

那么 [[Resolve]](promise, x) 的步骤过程如下：

如果 promise 和 x 是同一个对象引用，那么直接抛 TypeError 错误（避免循环）。
如果 x 为一个 promise，那么根据其状态：
2.1 如果 x 状态为 pending，promise 也必须维持 pending 状态直至 x 变为 fulfilled 或 rejected。
2.2 如果 x 状态为 fulfilled，promise 也 fulfill 为同样的 value。
2.3 如果 x 状态为 rejected，promise 也 reject 为同样的 reason。
如果 x 为一个对象（不含 null）或函数，则：
3.1. 令 then 为 x.then。
3.2. 如读取属性 x.then 导致抛出异常 e，则以 e 作为原因 reject 掉 promise。
3.3. 如 then 为一个函数，则使用 x 作为 this 调用 then，并传入两个回调函数 resolvePromise 及 rejectPromise，对于这两个参数：
3.3.1. 当传入 value y 调用 resolvePromise(y) 时，执行 [[Resolve]](promise, y)。
3.3.2. 当传入 reason r 调用 rejectPromise(r) 时，以 r 作为 reason reject promise。
3.3.3. 当 resolvePromise 或 rejectPromise 两者合起来被调用超过一次，则除了第一个调用，其余均会被忽略。
3.3.4. 当调用 then 时抛出一个异常 e，则：
3.3.4.1 如果已经调用过 resolvePromise 或 rejectPromise，直接忽略异常。
3.3.4.2 否则以 e 作为 reason reject promise。
3.4. 如果 then 不是函数，则使用 value x 来 fulfilled promise。
如果 x 既非对象也非函数，使用 value x 来了 fulfilled promise。

如果一个 promise 以 thenable 为 value 被 resolved，即 [[Resolve]](promise, thenable)，并且这个 thenable 是一个循环的 thenable 链的一环，那么将会导致 [[Resolve]](promise, thenable) 再次被调用，出现无尽递归。规范虽然不要求，但是鼓励检测这样的循环，并以包含详细信息的 TypeError 作为 reason 来 reject 这个 promise。
上面对 thenable 的处理方式，使得不同的 Promise/A+ 实现可以互操作。

以上就是对 Promise/A+ 规范的要点解读，虽然内容不多，但是也非常枯燥无聊，下面开始一步步写一个简单的实现。

实现

仿照浏览器的 Promise 实现，我们也准备将自定义的实现以 class 的形式来实现，先按照上述规范要求，写出最主要的结构：

1
class PromiseAplus {
2
  then(onFulfilled, onRejected) {}
3
}

跟着，补充完整基础的属性，包括状态、value 和 reason：

1
// 定义 Promise 的三种状态
2
const FULFILLED = 'fulfilled'
3
const REJECTED = 'rejected'
4
const PENDING = 'pending'
5

6
class PromiseAplus {
7
  constructor() {
8
    // promise 刚创建时，为 PENDING 状态
9
    this._PromiseState = PENDING
10

11
    // 由于 `fulfilled` 和 `rejected` 永远互斥，
12
    // 因此，value 跟 reason 我们统一使用一个属性保存即可
13
    // promise 创建时，value 初始化为 undefined
14
    this._PromiseResult = undefined
15
  }
16

17
  then(onFulfilled, onRejected) {}
18
}

promise 存在从 pending 往 fulfilled 或 rejected 变化的两条路径，因此，我们实现两个函数来做这个事情。

1
// 其他部分略…
2
class PromiseAplus {
3
  constructor() {
4
    // 其他部分略…
5
    const resolve = (value) => {
6
      this._PromiseState = FULFILLED
7
      this._PromiseResult = value
8
    }
9

10
    const reject = (reason) => {
11
      this._PromiseState = REJECTED
12
      this._PromiseResult = reason
13
    }
14
  }
15
  // 其他部分略…
16
}

那么这两个函数在什么时候被调用呢？回想我们平时使用 Promise 的方式，答案就是用户创建 Promise 的时候，在适当时机手动调用。

于是，我们需要将这两个函数暴露出去给 Promise 创建方调用，具体为，用户创建 promise 的时候，传入一个执行器，在执行器中，以参数形式注入这两个函数。

实现代码：

1
// 其他部分略…
2
class PromiseAplus {
3
  // 传入执行器
4
  constructor(executor) {
5
    // 其他部分略…
6
    const resolve = (value) => {
7
      this._PromiseState = FULFILLED
8
      this._PromiseResult = value
9
    }
10

11
    const reject = (reason) => {
12
      this._PromiseState = REJECTED
13
      this._PromiseResult = reason
14
    }
15

16
    // resolve, reject 作为参数注入执行器，暴露给使用者自行调用
17
    // 此处 executor 本身也可能抛异常，如果捕获到异常，直接 reject 即可。
18
    try {
19
      executor(resolve, reject)
20
    }
21
    catch(error) {
22
      reject(error)
23
    }
24
  }
25
  // 其他部分略…
26
}

实现了 Promise 的构造方法，接着我们实现另一个核心，即 then 方法，需要实现以下要点：

返回一个 promise
通过回调可以访问 value 或 reason

1
// 其他部分略…
2
class PromiseAplus {
3
  // 其他部分略…
4
  then(onFulfilled, onRejected) {
5
    // then 每次调用，都必须返回一个 promise
6
    return new PromiseAplus((resolve, reject) => {
7
      // 如果当前 promise 已经 fulfilled，则可以访问到 value
8
      if (this._PromiseState === FULFILLED) {
9
        if (typeof onFulfilled === 'function') {
10
          onFulfilled(this._PromiseResult)
11
        }
12
      }
13
      // 如果当前 promise 已经 rejected，则可以访问到 reason
14
      if (this._PromiseState === REJECTED) {
15
        if (typeof onRejected === 'function') {
16
          onRejected(this._PromiseResult)
17
        }
18
      }
19
      // 如果当前 promise 为 PENDING，则一会再考虑…
20
    })
21
  }
22
  // 其他部分略…
23
}

试着使用一下：

1
const promise1 = new PromiseAplus((resolve, reject) => {
2
  resolve('fulfilled!')
3
})
4
const promise2 = new PromiseAplus((resolve, reject) => {
5
  reject('rejected!')
6
})
7
const onFulfilled = value => console.log('value is: ', value)
8
const onRejected = reason => console.log('reason is: ', reason)
9

10
promise1.then(onFulfilled, onRejected) // 打印：'value is:  fulfilled!'
11
promise2.then(onFulfilled, onRejected) // 打印：'reason is:  rejected!'

如此已经有了 Promise 的雏形了。

接着继续补完 then 在 pending 状态的时的处理逻辑。根据规范，两个回调不能在 promise fulfilled 或 rejected 之前被调用，那就意味着，我们要先将现场信息保存下来，留待 promise 状态变化的时候，再取出执行。

我们可以用一个闭包来封装保存现场信息和封装操作，然后新增一个数组属性来存放这些闭包，最后再实现一个遍历执行的函数。

代码如下：

1
// 其他代码略…
2
class PromiseAplus {
3
  constructor(executor) {
4
    // 其他代码略…
5

6
    // 新增一个属性用来保存将要执行的 then 回调操作
7
    this._callbacks = []
8

9
    // 新增一个遍历执行所有保存的 then 回调的函数
10
    const walkCallbacks = () => {
11
      const len = this._callbacks.length
12
      for (let i = 0; i < len; i += 1) {
13
        this._callbacks[i]()
14
      }
15
      this._callbacks = []
16
    }
17

18
    // 改造 resolve 和 reject 函数，在状态从 pending 转换成 fulfilled 或 rejected 的时候，执行暂存的 then 回调操作
19
    const resolve = (value) => {
20
      this._PromiseState = FULFILLED
21
      this._PromiseResult = value
22
      walkCallbacks()
23
    }
24
    const reject = (reason) => {
25
      this._PromiseState = REJECTED
26
      this._PromiseResult = reason
27
      walkCallbacks()
28
    }
29

30
    // 其他代码略…
31
  }
32

33
  // 重新改造 then 方法的实现
34
  then(onFulfilled, onRejected) {
35
    return new PromiseAplus((resolve, reject) => {
36
      // 用一个闭包封装好当前状态和将要做的操作
37
      const resolution = () => {
38
        if (this._PromiseState === FULFILLED) {
39
          if (typeof onFulfilled === 'function') {
40
            onFulfilled(this._PromiseResult)
41
          }
42
        }
43
        if (this._PromiseState === REJECTED) {
44
          if (typeof onRejected === 'function') {
45
            onRejected(this._PromiseResult)
46
          }
47
        }
48
      }
49

50
      // 然后根据状态是否 PENDING，决定立即应用操作还是先保存起来延迟执行
51
      if (this._PromiseState === PENDING) {
52
        this._callbacks.push(resolution)
53
      }
54
      else {
55
        resolution()
56
      }
57
    })
58
  }
59
}

再测试下效果：

1
const promise1 = new PromiseAplus((resolve, reject) => {
2
  setTimeout(() => {
3
    resolve('fulfilled!')
4
  }, 2000)
5
})
6
const promise2 = new PromiseAplus((resolve, reject) => {
7
  setTimeout(() => {
8
    reject('rejected!')
9
  }, 2000)
10
})
11
const onFulfilled = value => console.log('value is: ', value)
12
const onRejected = reason => console.log('reason is: ', reason)
13
promise1.then(onFulfilled, onRejected) // 2s 后打印：'value is:  fulfilled!'
14
promise2.then(onFulfilled, onRejected) // 2s 后打印：'reason is:  rejected!'

至此，我们实现了通过回调去访问 promise 的 value 和 reason 的特性。

根据规范，我们这两个回调的作用，除了访问 promise 的 value 和 reason，还应当产生新的结果，用来作为 then 返回的 promise 的结果参与决议流程。

所以继续改造，以便可以利用回调的返回值：

1
// 其他代码略…
2
class PromiseAplus {
3
  // 其他代码略…
4
  then(onFulfilled, onRejected) {
5
    return new PromiseAplus((resolve, reject) => {
6
      // 改造 resolution 的实现，将两个回调的结果作为当前 Promise 的 value 或 reason
7
      const resolution = () => {
8
        const fn = this._PromiseState === FULFILLED ? onFulfilled : onRejected
9
        try {
10
          const result = fn(this._PromiseResult)
11
          resolve(result)
12
        }
13
        catch (error) {
14
          reject(error)
15
        }
16
      }
17
      // 其他代码略…
18
    })
19
  }
20
}

改造到这个阶段，就已经实现了 Promise 的最核心部分了。

然后我们再考虑下这种使用情况：

1
new Promise((resolve, reject) => {
2
  resolve('resolve!')
3
})
4
.then() // 什么也不干
5
.then((value) => console.log(value)) // 这里能拿到 `'resolve!'` 这个 value。

这就是 Promise 的值的传递特性，我们接着实现这一点。

可以从 onFulfilled 和 onRejected 着手，在传入非函数的时候，我们自己构造一个函数作为默认实现，将 value 或 reason 原样传递下去即可。

1
// 其他代码略…
2
class PromiseAplus {
3
  // 其他代码略…
4
  then(onFulfilled, onRejected) {
5
    return new PromiseAplus((resolve, reject) => {
6
      // 改造 resolution 的实现
7
      const resolution = () => {
8
        // 如果没有实现 onFulfilled | onRejected 逻辑，则使用透传实现
9
        const fn = this._PromiseState === FULFILLED
10
          // value 传递
11
          ? typeof onFulfilled === 'function' ? onFulfilled : (value => value)
12
          // reason 传递
13
          : typeof onRejected === 'function' ? onRejected : (reason => { throw reason })
14

15
        try {
16
          const result = fn(this._PromiseResult)
17
          resolve(result)
18
        }
19
        catch (error) {
20
          reject(error)
21
        }
22
      }
23
      // 其他代码略…
24
    })
25
  }
26
}

这样就可以确保 promise 的 value 或 reason 能正确传递下去。

之后再来实现最复杂的部分，promise 的决议过程（Resolution Procedure）。

需要注意的要点比较多，因此下面直接在代码中，使用注释来详细说明。

1
class PromiseAplus {
2
  constructor(executor) {
3
    // 其他代码略…
4

5
    const resolve = (value) => {
6
      // 状态变为 fulfilled 或 rejected 后，就不能再变化了
7
      if (this._PromiseState !== PENDING) return
8

9
      // 如果 `promise` 和 `value` 是同一个对象引用，那么直接抛 `TypeError` 错误（避免循环）。
10
      if (value === this) {
11
        throw new TypeError('Chaining cycle detected for promise #<Promise>')
12
      }
13

14
      // 如果是对象（不含 null）或者函数，有可能是 thenable，
15
      // 为了跟其他 Promise/A+ 的实现互操作，需要特殊处理
16
      if (typeof value === 'function' || (typeof value === 'object' && value !== null)) {
17
        // 该 flag 用来避免多次 resolve 或 reject，
18
        // 在尝试多次调用的时候，只处理第一次，后续的都忽略
19
        let ignore = false
20

21
        try {
22
          // 访问 then 出错也应当 reject
23
          const then = value.then
24

25
          // thenable
26
          if (typeof then === 'function') {
27
            // 包装当前 promise 的 resolve 函数，加入 ignore 控制
28
            const resolvePromise = y => {
29
              if (ignore) return
30
              ignore = true
31
              resolve(y)
32
            }
33
            // 包装当前 promise 的 reject 函数，加入 ignore 控制
34
            const rejectPromise = r => {
35
              if (ignore) return
36
              ignore = true
37
              reject(r)
38
            }
39

40
            // 对于 thenable（也包括本自定义 promise 类或其他 promise 类）
41
            // 需要等待其被 resolve 或 reject，才能 resolve 或 reject 当前 promise
42
            return then.call(value, resolvePromise, rejectPromise)
43
          }
44
        }
45
        catch(error) {
46
          // 如果出现错误，则 reject promise，需要避免多次 reject
47
          if (!ignore) reject(error)
48
          return
49
        }
50
      }
51

52
      // 对于非 thenable 的对象或函数，以及其他类型的值，则直接 resolve
53
      this._PromiseState = FULFILLED
54
      this._PromiseResult = value
55

56
      // resolve 之后，可以开始调用所有 then 对应的 promise 的 resolution 逻辑了
57
      walkCallbacks()
58
    }
59

60
    const reject = (reason) => {
61
      // 状态变为 fulfilled 或 rejected 后，就不能再变化了
62
      if (this._PromiseState !== PENDING) return
63

64
      this._PromiseState = REJECTED
65
      this._PromiseResult = reason
66

67
      // reject 之后，可以开始调用所有 then 对应的 promise 的 resolution 逻辑了
68
      walkCallbacks()
69
    }
70

71
    // 其他代码略…
72
  }
73
}

这样一来，我们的 Promise 就具备了处理 promise 嵌套的能力了。

再看看规范，我们还有一点没有做到，那就是 then 的两个回调，都需要异步执行。

在浏览器的 Promise 实现中，这是利用微任务来做的。我们参考浏览器的实现，接下来就尝试将调用异步化。

首先实现一个可以异步调用函数的辅助函数：

1
// 用 IIFE 封装，里面根据情况返回对应的实现。
2
const queueMicrotask = (function() {
3
  // 如果当前环境原生支持 global.queueMicrotask，则直接使用
4
  if (this.queueMicrotask) return this.queueMicrotask
5

6
  // 对于浏览器环境，使用 MutationObserver 来模拟
7
  if (this.document && this.MutationObserver) {
8
    let seed = 0
9
    const $el = document.createElement('div')
10
    const queue = () => $el.setAttribute('change', ++seed)
11

12
    return fn => {
13
      const observer = new MutationObserver(() => {
14
        fn()
15
        observer.disconnect()
16
      })
17
      observer.observe($el, { attributes: true })
18
      queue()
19
    }
20
  }
21

22
  // 对于 node 环境，使用 process.nextTick
23
  if (this.process) {
24
    return fn => process.nextTick(fn)
25
  }
26

27
  // fallback 为 setTimeout
28
  return fn => setTimeout(fn, 0)
29
})()

然后改造我们的 then 方法，添加上异步调用的代码：

1
class PromiseAplus {
2
  // 其他代码略…
3
  then(onFulfilled, onRejected) {
4
    return new this.constructor((resolve, reject) => {
5
      const resolution = () => {
6
        const fn = this._PromiseState === FULFILLED
7
          ? typeof onFulfilled === 'function' ? onFulfilled : defaultOnFulfilled
8
          : typeof onRejected === 'function' ? onRejected : defaultOnRejected
9

10
        // 异步化，在微任务中调用 then 的 onFulfilled，根据结果 resolve OR reject
11
        queueMicrotask(() => {
12
          try {
13
            const result = fn(this._PromiseResult)
14
            resolve(result)
15
          }
16
          catch(error) {
17
            reject(error)
18
          }
19
        })
20
      }
21

22
      if (this._PromiseState === PENDING) {
23
        this._callbacks.push(resolution)
24
      }
25
      else {
26
        resolution()
27
      }
28
    })
29
  }
30
  // 其他代码略…
31
}

至此，我们就算彻底完成一个 Promise/A+ 的实现了。

对上面所写的代码，略作整理调整，完整的代码如下：

1
const queueMicrotask = (function() {
2
  if (this.queueMicrotask) return this.queueMicrotask
3
  if (this.document && this.MutationObserver) {
4
    let seed = 0
5
    const $el = document.createElement('div')
6
    const queue = () => $el.setAttribute('change', ++seed)
7

8
    return fn => {
9
      const observer = new MutationObserver(() => {
10
        fn()
11
        observer.disconnect()
12
      })
13
      observer.observe($el, { attributes: true })
14
      queue()
15
    }
16
  }
17
  if (this.process) {
18
    return fn => process.nextTick(fn)
19
  }
20
  return fn => setTimeout(fn, 0)
21
})()
22

23
const FULFILLED = 'fulfilled'
24
const REJECTED = 'rejected'
25
const PENDING = 'pending'
26

27
const defaultOnFulfilled = v => v
28
const defaultOnRejected = e => { throw e }
29

30
class PromiseAplus {
31
  constructor(executor) {
32
    this._PromiseState = PENDING
33
    this._PromiseResult = undefined
34
    this._callbacks = []
35

36
    const walkCallbacks = () => {
37
      const len = this._callbacks.length
38
      for (let i = 0; i < len; i += 1) {
39
        this._callbacks[i]()
40
      }
41
      this._callbacks = []
42
    }
43

44
    const resolve = (value) => {
45
      if (this._PromiseState !== PENDING) return
46
      if (value === this) {
47
        throw new TypeError('Chaining cycle detected for promise #<Promise>')
48
      }
49

50
      if (typeof value === 'function' || (typeof value === 'object' && value !== null)) {
51
        let ignore = false
52
        try {
53
          const then = value.then
54
          if (typeof then === 'function') {
55
            const resolvePromise = y => {
56
              if (ignore) return
57
              ignore = true
58
              resolve(y)
59
            }
60
            const rejectPromise = r => {
61
              if (ignore) return
62
              ignore = true
63
              reject(r)
64
            }
65
            return then.call(value, resolvePromise, rejectPromise)
66
          }
67
        }
68
        catch(error) {
69
          if (!ignore) reject(error)
70
          return
71
        }
72
      }
73

74
      this._PromiseState = FULFILLED
75
      this._PromiseResult = value
76
      walkCallbacks()
77
    }
78

79
    const reject = (reason) => {
80
      if (this._PromiseState !== PENDING) return
81

82
      this._PromiseState = REJECTED
83
      this._PromiseResult = reason
84
      walkCallbacks()
85
    }
86
    try {
87
      executor(resolve, reject)
88
    }
89
    catch(error) {
90
      reject(error)
91
    }
92
  }
93

94
  then(onFulfilled, onRejected) {
95
    return new this.constructor((resolve, reject) => {
96
      const resolution = () => {
97
        const fn = this._PromiseState === FULFILLED
98
          ? typeof onFulfilled === 'function' ? onFulfilled : defaultOnFulfilled
99
          : typeof onRejected === 'function' ? onRejected : defaultOnRejected
100
        queueMicrotask(() => {
101
          try {
102
            const result = fn(this._PromiseResult)
103
            resolve(result)
104
          }
105
          catch(error) {
106
            reject(error)
107
          }
108
        })
109
      }
110
      if (this._PromiseState === PENDING) {
111
        this._callbacks.push(resolution)
112
      }
113
      else {
114
        resolution()
115
      }
116
    })
117
  }
118
}

感兴趣的可以尝试去浏览器跑一跑代码验证一下。

不过要证明该实现确实符合 Promise/A+ 的所有要求，还得跑一遍官方的测试集才算。

下面说明下怎么做测试。

测试

首先是初始化一个 npm 包，然后安装测试依赖：

1
npm install promises-aplus-tests --save-dev

然后书写测试入口文件，在这个入口文件中，调用官方测试函数，并传入我们实现好的 Promise 即可。

官方测试函数为了兼容各种不同的实现，使用了适配器模式，需要我们自己按照要求写好适配器，再传入测试。

适配器需要实现三个接口：

resolved 方法，用于返回一个指定 value 的处于 fulfilled 状态的 promise。
rejected 方法，用于返回一个指定 reason 的处于 rejected 状态的 promise。
deferred 方法，返回一个对象，这个对象中包含三个字段，分别为：

promise，为一个 promise 对象。
resolve，为一个函数，调用可以用指定的 value 来 resolve 掉上述 promise。
reject，为一个函数，调用可以用指定的 reason 来 reject 掉上述 promise。

下面示范该入口文件的写法：

1
// 引入测试方法
2
const promisesAplusTests = require("promises-aplus-tests")
3

4
// 引入自己实现的 Promise
5
const Promise = require('./promise')
6

7
// 写一个测试需要的适配器
8
// 必须实现三个方法：rejected，resolved，deferred
9
const adapter = {
10
  // 该方法要求传入一个 resolve 的值，返回一个对应的 fulfilled 状态的 Promise
11
  resolved: function(value) {
12
    return Promise.resolve(value)
13
  },
14

15
  // 该方法要求传入一个 reject 的原因，返回对应一个 rejected 状态的 Promise
16
  rejected: function(reason) {
17
    return Promise.reject(reason)
18
  },
19

20
  // 该方法要求返回一个对象，
21
  // 对象包含三个属性：
22
  // 1. promise（一个 Promise 对象）
23
  // 2. resolve（resolve 上述 promise 的一个方法）
24
  // 3. reject（reject 上述 promise 的一个方法）
25
  deferred: function() {
26
    let resolve
27
    let reject
28
    const promise = new Promise((_resolve, _reject) => {
29
      resolve = _resolve
30
      reject = _reject
31
    })
32

33
    return {
34
      promise,
35
      resolve,
36
      reject,
37
    }
38
  }
39
}
40

41
// 然后调用该函数即可开始测试
42
promisesAplusTests(adapter, function (err) { /* All done; output is in the console. Or check `err` for number of failures. */ })

写好入口文件后，我们还需要改造下我们实现的 Promise，将其导出成一个 CommonJS 模块。

只需要简单地在末尾加上导出语句即可：

1
// 其余代码略…
2
module.exports = PromiseAplus

最后就是执行测试了，简单的使用 node 执行该测试入口文件即可，执行过程屏幕将会打印测试通过跟失败的记录。如果实现正确，将会通过全部 872 项测试。

改进完善

为了更接近我们实际使用的 Promise，还有一些实例方法和静态方法需要实现，我们在上面实现好的 PromiseAplus 基础上，通过继承来扩展我们的新功能。

1
class MyPromise extends PromiseAplus {
2
}

catch 实例方法

catch 方法只是 then 方法的一个特例，实现比较简单：

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  catch(onRejection) {
4
    return this.then(null, onRejection)
5
  }
6
}

finally 实例方法

finally 类似 try catch 的 finally，不管 promise 的状态切换成哪种，均为被调用。

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  finally(onFinally) {
4
    return this.then(
5
      value => this.constructor.resolve(onFinally()) .then(() => value),
6
      reason => this.constructor.resolve(onFinally()).then(() => { throw reason })
7
    )
8
  }
9
}

resolve 静态方法

只需要简单地封装下现有的方法：

1
class MyPromise extends PromiseAplus {
2
  static resolve(value) {
3
    if (value instanceof this.prototype.constructor) {
4
      return value
5
    }
6
    return new this.prototype.constructor(resolve => resolve(value))
7
  }
8
  // 其他代码略…
9
}

reject 静态方法

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  static reject(error) {
4
    return new this.prototype.constructor((_, reject) => reject(error))
5
  }
6
  // 其他代码略…
7
}

all 静态方法

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  static all(iterable) {
4
    const promises = [...iterable]
5
    return new MyPromise((resolve, reject) => {
6
      const results = []
7
      const length = promises.length
8
      if (!length) return resolve(results)
9

10
      let stop = false
11
      let count = length
12
      for (let i = 0; i < length; i += 1) {
13
        MyPromise.resolve(promises[i]).then(
14
          value => {
15
            results[i] = value
16
            if (!--count) {
17
              resolve(results)
18
            }
19
          },
20
          reason => {
21
            if (stop) return
22
            stop = true
23
            reject(reason)
24
          }
25
        )
26
      }
27
    })
28
  }
29
  // 其他代码略…
30
}

race 静态方法

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  static race(iterable) {
4
    const promises = [...iterable]
5
    return new MyPromise((resolve, reject) => {
6
      const length = promises.length
7
      // 返回永远 pending 的 promise
8
      if (!length) return new MyPromise(() => {})
9

10
      let stop = false
11
      for (let i = 0; i < length; i += 1) {
12
        MyPromise.resolve(promises[i]).then(
13
          value => {
14
            if (stop) return
15
            stop = true
16
            resolve(value)
17
          },
18
          reason => {
19
            if (stop) return
20
            stop = true
21
            reject(reason)
22
          }
23
        )
24
      }
25
    })
26
  }
27
  // 其他代码略…
28
}

allSettled 静态方法

1
class MyPromise extends PromiseAplus {
2
  // 其他代码略…
3
  static allSettled(iterable) {
4
    const promises = [...iterable]
5
    return new MyPromise((resolve, reject) => {
6
      const results = []
7
      const length = promises.length
8
      if (!length) return resolve(results)
9

10
      let count = length
11
      for (let i = 0; i < length; i += 1) {
12
        MyPromise.resolve(promises[i]).then(
13
          value => {
14
            results[i] = {
15
              status: 'fulfilled',
16
              value
17
            }
18
            if (!--count) {
19
              resolve(results)
20
            }
21
          },
22
          reason => {
23
            results[i] = {
24
              status: 'rejected',
25
              value: reason,
26
            }
27
            if (!--count) {
28
              resolve(results)
29
            }
30
          }
31
        )
32
      }
33
    })
34
  }
35
  // 其他代码略…
36
}

全文完

如何实现一个符合 Promise/A+ 规范的 Promise