Promise

异步任务的处理

以一个实际例子作为切入点：

调用一个函数，在这个函数中发送网络请求（这里使用定时器模拟）；
如果网络请求发送成功，那么告知调用者发送成功；
如果网络请求发送失败，那么告知调用者发送失败。

1
function requestData(url, successCallback, failureCallback) {
2
  setTimeout(() => {
3
    if (url === '/test') {
4
      // 发送成功
5
      successCallback('发送成功')
6
    }
7
    else {
8
      // 发送失败
9
      failureCallback('发送失败')
10
    }
11
  }, 1000)
12
}
13

14
function successCallback(res) {
15
  console.log(res)
5 collapsed lines
16
}
17
function failureCallback(err) {
18
  console.log(err)
19
}
20
requestData('/test', successCallback, failureCallback)

在上面的解决方案中，我们确实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题：

需要自己来设计回调函数、回调函数名称、回调函数的使用等；
对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解这个函数到底怎么用。

什么是 Promise?

我们来看一下 Promise 的 API 是怎么样的：

Promise 是一个类，可以翻译成承诺、许诺、期约；
当需要给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个 Promise 的对象；
在通过 new 创建 Promise 对象时，需要传入一个回调函数，我们称之为 executor。
- 这个回调函数会被立即执行，并且给传入另两个对调函数 resolve、reject；
- 当调用 resolve 回调函数时，会执行 Promise 对象的 then 方法传入的回调函数；
- 当调用 reject 回调函数时，会执行 Promise 对象的 catch 方法传入的回调函数。

Promise 的代码结构

1
const promise = new Promise((resolve, reject) => {
2
  // 调用 resolve, 那么 then 传入的回调函数会被执行
3
  resolve('resolve')
4
  // 调用 reject, 那么 catch 传入的回调函数会被执行
5
  reject('reject')
6
})
7

8
promise.then((res) => {
9
  console.log(res)
10
}).catch((err) => {
11
  console.log(err)
12
})

上面 Promise 使用过程，我们可以将它划分成三个状态：

待定（pending）：初始状态，既没有被兑现，也没有被拒绝，当执行 executor 中的代码时，处于该状态；
已兑现（fulfilled）: 意味着操作成功完成，执行了 resolve 时，处于该状态；
已拒绝（rejected）: 意味着操作失败，执行了 reject 时，处于该状态。

Promise 重构请求

1
function requestData(url) {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      if (url === '/test')
5
        resolve('发送成功')
6
      else
7
        reject('发送失败')
8
    }, 1000)
9
  })
10
}

Executor

Executor 是在创建 Promise 时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数：

1
new Promise((resolve, reject) => {
2
  console.log('executor code')
3
})

通常我们会在 Executor 中确定我们的 Promise 状态：

通过 resolve，可以兑现（fulfilled）Promise 的状态，我们也可以称之为已决议（resolved）；
通过 reject，可以拒绝（reject）Promise 的状态。

这里需要注意：一旦状态被确定下来，Promise 的状态会被锁死，该 Promise 的状态是不可更改的。

在我们调用 resolve 的时候，如果 resolve 传入的值本身不是一个 Promise，那么会将该 Promise 的状态变成兑现（fulfilled）；
在之后我们去调用 reject 时，已经不会有任何的响应了（并不是这行代码不会执行，而是无法改变 Promise 状态）。

resolve 不同值的区别

情况一：如果 resolve 传入一个普通的值或者对象，那么这个值会作为 then 回调的参数；

1
new Promise((resolve, reject) => {
2
  resolve('normal resolve')
3
}).then((res) => {
4
  connsole.log(res)
5
})

情况二：如果 resolve 中传入的是另外一个 Promise，那么这个新 Promise 会决定原 Promise 的状态；

1
new Promise((resolve, reject) => {
2
  resolve(new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      resolve('第二个 Promise 的 resolve')
5
    }, 1000)
6
  }))
7
}).then((res) => {
8
  console.log(res)
9
})

情况三：如果 resolve 中传入的是一个对象，并且这个对象有实现 then 方法，那么会执行该 then 方法，并且根据 then 方法的结果来决定 Promise 的状态。

1
new Promise((resolve, reject) => {
2
  resolve({
3
    then(resolve, reject) {
4
      resolve('thenable value')
5
    }
6
  })
7
}).then((res) => {
8
  console.log(res)
9
})

then 方法 - 接受两个参数

then 方法是 Promise 对象上的一个方法：它其实是放在 Promise 的原型上的 Promise.prototype.then。

then 方法接受两个参数：

fulfilled 的回调函数：当状态变成 fulfilled 时会回调的函数；
reject 的回调函数：当状态变成 reject 时会回调的函数。

1
promise.then(res => {
2
  console.log(res)
3
}, err => {
4
  console.log(err)
5
})
6
// 等价于
7
promise.then(res => {
8
  console.log(res)
9
}).catch(, err => {
10
  console.log(err)
11
})

then 方法 - 多次调用

一个 Promise 的 then 方法是可以被多次调用的：

每次调用我们都可以传入对应的 fulfilled 回调；
当 Promise 的状态变成 fulfilled 的时候，这些回调函数都会被执行。

1
promise.then((res) => {
2
  console.log('res1:', res)
3
})
4

5
promise.then((res) => {
6
  console.log('res2:', res)
7
})

then 方法 – 返回值

then 方法本身是有返回值的。它的返回值是一个 Promise，但是 then 方法返回的 Promise 到底处于什么样的状态呢？

Promise 有三种状态，那么这个 Promise 处于什么状态呢？

当 then 方法中的回调函数本身在执行的时候，那么它处于 pending 状态；
当 then 方法中的回调函数返回一个结果时，那么它处于 fulfilled 状态，并且会将结果作为 resolve 的参数；
- 情况一：返回一个普通的值；
- 情况二：返回一个 Promise；
- 情况三：返回一个 thenable 值。
当 then 方法抛出一个异常时，那么它处于 reject 状态。

catch 方法 - 多次调用

catch 方法也是 Promise 对象上的一个方法：它也是放在 Promise 的原型上的 Promise.prototype.catch。

一个 Promise 的 catch 方法是可以被多次调用的：

每次调用我们都可以传入对应的 reject 回调；
当 Promise 的状态变成 reject 的时候，这些回调函数都会被执行。

1
promise.catch((err) => {
2
  console.log('err1:', err)
3
})
4

5
promise.catch((err) => {
6
  console.log('err2:', err)
7
})

catch 方法 - 返回值

事实上 catch 方法也是会返回一个 Promise 对象的，所以 catch 方法后面我们可以继续调用 then 方法或者 catch 方法。

下面的代码，后续是 res 打印，这是因为 catch 传入的回调在执行完后，默认状态依然会是 fulfilled 的。

1
promise.catch((err) => {
2
  console.log(err)
3
}).then((res) => {
4
  console.log('res', res)
5
}).catch((err) => {
6
  console.log('err', err)
7
})

那么如果我们希望后续继续执行 catch，那么需要抛出一个异常。

1
promise.catch((err) => {
2
  console.log(err)
3
  throw new Error('error')
4
}).then((res) => {
5
  console.log('res', res)
6
}).catch((err) => {
7
  console.log('err', err)
8
})

finally 方法

finally 是在 ES9（ES2018）中新增的一个特性：表示无论 Promise 对象无论变成 fulfilled 还是 reject 状态，最终都会被执行的代码。

finally 方法是不接收参数的，因为无论前面是 fulfilled 状态，还是 reject 状态，它都会执行。

1
const promise = new Promise((resolve, reject) => {
2
  resolve('fulfilled')
3
  reject('reject')
4
})
5

6
promise.then((res) => {
7
  console.log(res)
8
}).catch((err) => {
9
  console.log(err)
10
}).finally(() => {
11
  console.log('finally')
12
})

resolve 方法

前面我们学习的 then、catch、finally 方法都属于 Promise 的实例方法，都是存放在 Promise 的 prototype 上的。下面我们再来学习一下 Promise 的类方法。

有时候我们已经有一个现成的内容了，希望将其转成 Promise 来使用，这个时候我们可以使用 Promise.resolve 方法来完成。

Promise.resolve 的用法相当于 new Promise，并且执行 resolve 操作。

1
Promise.resolve('Hongbusi')
2
// 等价于
3
new Promise(resolve => resolve('Hongbusi'))

resolve 参数的形态：

情况一：参数是一个普通的值或者对象；
情况二：参数本身是 Promise；
情况三：参数是一个 thenable。

reject 方法

reject 方法类似于 resolve 方法，只是会将 Promise 对象的状态设置为 reject 状态。

Promise.reject 的用法相当于 new Promise，只是会调用 reject。

1
Promise.reject('Hongbusi')
2
// 等价于
3
new Promise((resolve, reject) => reject('Hongbusi'))

Promise.reject 传入的参数无论是什么形态，都会直接作为 reject 状态的参数传递到 catch 的。

all 方法

还有一个类方法是 Promise.all。它的作用是将多个 Promise 包裹在一起形成一个新的 Promise。

新的 Promise 状态由包裹的所有 Promise 共同决定：

当所有的 Promise 状态变成 fulfilled 状态时，新的 Promise 状态为 fulfilled，并且会将所有 Promise 的返回值组成一个数组；
当有一个 Promise 状态为 reject 时，新的 Promise 状态为 reject，并且会将第一个 reject 的返回值作为参数。

1
const p1 = new Promise((resolve, reject) => {
2
  // resolve('resolve1')
3
  // reject('reject1')
4
})
5
const p2 = new Promise((resolve, reject) => {
6
  // resolve('resolve2')
7
  // reject('reject2')
8
})
9
const p3 = new Promise((resolve, reject) => {
10
  // resolve('resolve3')
11
  // reject('reject3')
12
})
13

14
Promise.all([p1, p2, p3]).then((res) => {
15
  console.log(res)
3 collapsed lines
16
}).catch((err) => {
17
  console.log(err)
18
})

allSettled 方法

all 方法有一个缺陷：当有其中一个 Promise 变成 reject 状态时，新 Promise 就会立即变成对应的 reject 状态。那么对于 resolved 的，以及依然处于 pending 状态的 Promise，我们是获取不到对应的结果的；

在 ES11（ES2020）中，添加了新的 API Promise.allSettled：

该方法会在所有的 Promise 都有结果（settled），无论是 fulfilled，还是 reject 时，才会有最终的状态；
并且这个 Promise 的结果一定是 fulfilled 的。

1
const p1 = new Promise((resolve, reject) => {
2
  resolve('resolve1')
3
})
4
const p2 = new Promise((resolve, reject) => {
5
  reject('reject2')
6
})
7
const p3 = new Promise((resolve, reject) => {
8
  resolve('resolve3')
9
})
10
Promise.allSettled([p1, p2, p3]).then((res) => {
11
  console.log(res)
12
}).catch((err) => {
13
  console.log(err)
14
})

我们来看一下打印的结果：

allSettled 的结果是一个数组，数组中存放着每一个 Promise 的结果，并且是对应一个对象的；
这个对象中包含 status 状态，以及对应的 value 值。

1
[
2
  { status: 'fulfilled', value: 'resolve1' },
3
  { status: 'rejected', reason: 'reject2' },
4
  { status: 'fulfilled', value: 'resolve3' }
5
]

race 方法

如果有一个 Promise 有了结果，我们就希望决定最终新 Promise 的状态，那么可以使用 race 方法。prace 是竞技、竞赛的意思，表示多个 Promise 相互竞争，谁先有结果，那么就使用谁的结果。

1
Promise.race([p1, p2, p3]).then((res) => {
2
  console.log(res)
3
}).catch((err) => {
4
  console.log(err)
5
})

any 方法

any 方法是 ES12 中新增的方法，和 race 方法是类似的：

any 方法会等到一个 fulfilled 状态，才会决定新 Promise 的状态；
如果所有的 Promise 都是 reject 的，那么也会等到所有的 Promise 都变成 rejected 状态。

1
Promise.any([p1, p2, p3]).then((res) => {
2
  console.log(res)
3
}).catch((err) => {
4
  console.log(err)
5
})

如果所有的 Promise 都是 reject 的，那么会报一个 AggregateError 的错误。

手写 Promise

1
const PROMISE_STATUS_PENDING = 'pending'
2
const PROMISE_STATUS_FULFILLED = 'fulfilled'
3
const PROMISE_STATUS_REJECTED = 'rejected'
4

5
// 工具函数
6
function execFunctionWithCatchError(execFn, value, resolve, reject) {
7
  try {
8
    const result = execFn(value)
9
    resolve(result)
10
  }
11
  catch (err) {
12
    reject(err)
13
  }
14
}
15

153 collapsed lines
16
class HbsPromise {
17
  constructor(executor) {
18
    this.status = PROMISE_STATUS_PENDING
19
    this.value = undefined
20
    this.reason = undefined
21
    this.onFulfilledFns = []
22
    this.onRejectedFns = []
23

24
    const resolve = (value) => {
25
      if (this.status === PROMISE_STATUS_PENDING) {
26
        // 添加微任务
27
        queueMicrotask(() => {
28
          if (this.status !== PROMISE_STATUS_PENDING)
29
            return
30
          this.status = PROMISE_STATUS_FULFILLED
31
          this.value = value
32
          this.onFulfilledFns.forEach((fn) => {
33
            fn()
34
          })
35
        })
36
      }
37
    }
38

39
    const reject = (reason) => {
40
      if (this.status === PROMISE_STATUS_PENDING) {
41
        // 添加微任务
42
        queueMicrotask(() => {
43
          if (this.status !== PROMISE_STATUS_PENDING)
44
            return
45
          this.status = PROMISE_STATUS_REJECTED
46
          this.reason = reason
47
          this.onRejectedFns.forEach((fn) => {
48
            fn()
49
          })
50
        })
51
      }
52
    }
53

54
    try {
55
      executor(resolve, reject)
56
    }
57
    catch (err) {
58
      reject(err)
59
    }
60
  }
61

62
  then(onFulfilled, onRejected) {
63
    const defaultOnRejected = (err) => { throw err }
64
    onRejected = onRejected || defaultOnRejected
65

66
    const defaultOnFulfilled = (value) => { return value }
67
    onFulfilled = onFulfilled || defaultOnFulfilled
68

69
    return new HbsPromise((resolve, reject) => {
70
      // 1. 如果在 then 调用的时候，状态已经确定下来
71
      if (this.status === PROMISE_STATUS_FULFILLED)
72
        execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
73

74
      if (this.status === PROMISE_STATUS_REJECTED)
75
        execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
76

77
      // 2. 将成功回调和失败回调放到数组中
78
      if (this.status === PROMISE_STATUS_PENDING) {
79
        this.onFulfilledFns.push(() => {
80
          execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
81
        })
82
        this.onRejectedFns.push(() => {
83
          execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
84
        })
85
      }
86
    })
87
  }
88

89
  catch(onRejected) {
90
    return this.then(undefined, onRejected)
91
  }
92

93
  finally(onFinally) {
94
    this.then(() => {
95
      onFinally()
96
    }, () => {
97
      onFinally()
98
    })
99
  }
100

101
  static resolve(value) {
102
    return new HbsPromise(resolve => resolve(value))
103
  }
104

105
  static reject(reason) {
106
    return new HbsPromise((resolve, reject) => reject(reason))
107
  }
108

109
  static all(promises) {
110
    return new HbsPromise((resolve, reject) => {
111
      const values = []
112
      promises.forEach((promise, index) => {
113
        promise.then((res) => {
114
          values[index] = res
115
          if (values.length === promises.length)
116
            resolve(values)
117
        }, (err) => {
118
          reject(err)
119
        })
120
      })
121
    })
122
  }
123

124
  static allSettled(promises) {
125
    return new HbsPromise((resolve) => {
126
      const values = []
127
      promises.forEach((promise, index) => {
128
        promise.then((res) => {
129
          values[index] = {
130
            status: PROMISE_STATUS_FULFILLED,
131
            value: res
132
          }
133

134
          if (values.length === promises.length)
135
            resolve(values)
136
        }, (err) => {
137
          values[index] = {
138
            status: PROMISE_STATUS_REJECTED,
139
            reason: err
140
          }
141
          if (values.length === promises.length)
142
            resolve(values)
143
        })
144
      })
145
    })
146
  }
147

148
  static race(promises) {
149
    return new HbsPromise((resolve, reject) => {
150
      promises.forEach((promise) => {
151
        promise.then(resolve, reject)
152
      })
153
    })
154
  }
155

156
  static any(promises) {
157
    return new HbsPromise((resolve, reject) => {
158
      const reasons = []
159
      promises.forEach((promise, index) => {
160
        promise.then(resolve, (err) => {
161
          reasons[index] = err
162
          if (reasons.length === promises.length)
163
            reject(new AggregateError(reasons))
164
        })
165
      })
166
    })
167
  }
168
}

简单总结手写 Promise

一. Promise 规范

Promises/A+

二. Promise 类设计

1
class HbsPromise {}

1
function HbsPromise() {}

三. 构造函数的规划

1
class HbsPromise {
2
  constructor(executor) {
3
    // 定义状态
4
    // 定义 resolve、reject 回调
5
    // resolve 执行微任务队列：改变状态、获取 value、then 传入执行成功回调
6
    // reject 执行微任务队列：改变状态、获取 reason、then 传入执行失败回调
7

8
    // try catch
9
    executor(resolve, reject)
10
  }
11
}

四. then 方法的实现

1
class HbsPromise {
2
  then(onFulfilled, onRejected) {
3
    // this.onFulfilled = onFulfilled
4
    // this.onRejected = onRejected
5

6
    // 1.判断 onFulfilled、onRejected，会给默认值
7

8
    // 2.返回 Promise resolve/reject
9

10
    // 3.判断之前的 promise 状态是否确定
11
    // onFulfilled/onRejected 直接执行（捕获异常）
12

13
    // 4.添加到数组中 push(() => { 执行 onFulfilled/onRejected 直接执行代码 })
14
  }
15
}

五. catch 方法

1
class HbsPromise {
2
  catch(onRejected) {
3
    return this.then(undefined, onRejected)
4
  }
5
}

六. finally

1
class HbsPromise {
2
  finally(onFinally) {
3
    return this.then(() => { onFinally() }, () => { onFinally() })
4
  }
5
}

七. resolve/reject

1
class HbsPromise {
2
  static resolve(value) {
3
    return new HbsPromise(resolve => resolve(value))
4
  }
5

6
  static reject(reason) {
7
    return new HbsPromise((resolve, reject) => reject(reason))
8
  }
9
}

八. all/allSettled

核心：要知道 new Promise 的 resolve、reject 在什么情况下执行。

all：

情况一：所有的都有结果；
情况二：有一个 reject。

allSettled：

情况：所有都有结果，并且一定执行 resolve。

九. race/any

race:

情况：只要有结果。

any:

情况一：必须等到一个 resolve 结果；
情况二：都没有 resolve，所有的都是 reject。