术语通俗解释

• 兑现(resolved/fulfilled): 同步/异步操作成功
• 拒绝(rejected): 同步/异步操作失败
• 敲定: 同步/异步操作完成
• 兑现后的执行函数: 同步/异步操作成功后的回调函数
• 拒绝后的执行函数: 同步/异步操作失败后的回调函数
• 敲定后的执行函数: 同步/异步操作完成后的回调函数

介绍

概念

• Promise 是 ES6 引入的一种用于处理异步操作的对象，用来解决传统回调函数带来的“回调地狱”和错误无法统一捕获的难题。
• Promise 状态机: Promise 拥有三种互斥且不可逆的状态(PromiseState)
  • pending(待定)：初始状态，既不是成功，也不是失败
  • fulfilled(已兑现)：操作成功，通过 resolve(value) 改变，返回一个结果值(value)
  • rejected(已拒绝)：操作失败，通过 reject(reason) 或 throw 异常改变，返回一个错误原因(reason)调用

优点

• 解决回调地狱
  • 传统方式：层层嵌套的回调函数，导致代码缩进深、阅读困难
  • Promise：通过 .then() 方法串联，代码结构更平坦，逻辑更清晰
• 统一错误处理
  • 传统方式：每个回调函数都需要单独的错误处理逻辑，容易遗漏
  • Promise：错误会沿着链向后传递，只需要在链的最后添加一次 .catch() 即可捕获所有错误
• 支持链式调用
  • .then() 方法返回一个新的 Promise 实例，可以继续调用 .then()，实现数据的逐层传递和处理，而不需要额外的状态管理

示例

const asyncFn = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success')
      // reject('err')
      // 异步操作中通过 throw 抛出的错误无法捕获
      // 因为 try...catch 只能捕获同步操作抛出的错误
      // throw 'err'
    }, 1000)
  })
}
asyncFn().then(
  value => {
    console.log(value)
  },
  // 实际使用中，一般在最后通过 .catch 统一捕获错误
  reason => {
    console.warn(reason)
  }
)

Promise 的 API

Promise 构造函数 new Promise(executor)

• executor 执行器函数: 在实例化 Promise 时立即同步执行，Promise 将内部的 resolve 和 reject 两个函数作为参数传入 executor，即 executor(resolve, reject)

• resolve 函数: 兑现后我们调用的函数，调用后，Promise 的状态由 pending 变为 fulfilled，value 将作为兑现的结果值(PromiseResult)传递给后续链式调用中的 onFulfilled 回调函数

• reject 函数: 拒绝后我们调用的函数，调用后，Promise 的状态由 pending 变为 rejected，reason 将作为拒绝的原因(PromiseResult)传递给后续链式调用中的 onRejected 回调函数

Promise 的内部属性

PromiseState(状态)

• 记录 Promise 当前所处的状态，可取的值有 pending、fulfilled、rejected，状态唯一且不可逆

PromiseResult(结果值)

• 保存 Promise 敲定后的结果值，如果是 fulfilled 状态，则是兑现的值；如果是 rejected 状态，则是拒绝的原因

Promise 的静态方法

Promise.resolve(value)

• 作用: 创建一个立即 fulfilled 的 Promise
• 当 value 不是 Promise 实例，.resolve() 返回一个新的 Promise 实例，状态为 fulfilled ，结果值为 value
• 当 value 是另一个 Promise 实例，.resolve() 直接返回这个 Promise 实例

Promise.reject(reason)

• 作用: 创建一个立即 rejected 的 Promise
• 无论 reason 是什么，.reject() 返回一个新的 Promise 实例，状态为 rejected ，结果值为 reason

Promise.all(iterable)

• 作用: 等待所有 Promise 完成
• iterable: Promise 实例组成的可遍历对象(数组、Set 等)
• 当 iterable 内所有的 Promise 实例全部兑现，.all() 返回一个新的 Promise 实例，状态为 fulfilled ，结果值为 iterable 内所有的 Promise 实例结果值组成的数组，结果值顺序和 iterable 一致
• 当 iterable 内存在拒绝的 Promise 实例，.all() 返回一个新的 Promise 实例，状态为 rejected ，结果值为第一个拒绝的 Promise 实例的 reason

Promise.race(iterable)

• 作用: 竞争第一个完成的 Promise
• iterable: Promise 实例组成的可遍历对象(数组、Set 等)
• .race() 返回一个新的 Promise 实例，状态和结果值与第一个完成的 Promise 实例的状态和结果值一致

实例方法

Promise.prototype.then(onFulfilled, onRejected)

• onFulfilled 函数: 兑现后执行的函数 value => {}，如果 onFulfilled 不是函数或未传，则会被忽略，且原值会直接向后传递
• onRejected 函数: 拒绝后执行的函数 reason => {}，如果 onRejected 不是函数或未传，则会被忽略，且错误会直接向后传递
• .then() 返回一个新的 Promise 实例，状态和结果值取决于 onFulfilled 或 onRejected 的执行结果

Promise.prototype.catch(onRejected)

• 作用: 捕获 Promise 链中前面产生的错误，它是 .then(undefined, onRejected) 的语法糖
• onRejected 函数: 与 .then(onFulfilled, onRejected) 中的 onRejected 相同，拒绝后执行的函数 reason => {}
• .catch(onRejected) 等同于 .then(null, failureCallback)，如果错误处理代码对所有步骤都是一样的，可以把它附加到链的末尾

Promise.prototype.finally(onFinally)

• 作用: 无论 Promise 链最终是成功还是失败，最终都会执行的函数
• onFinally 函数: 没有参数，无法获取前面的结果，只能做清理工作
• 当 onFinally 返回不是 Promise 实例， .finally() 返回一个新的 Promise 实例，状态和结果值与原本的状态和结果值一致
• 当 onFinally 返回是另一个 Promise 实例
  • 当这个实例最终状态为 fulfilled， .finally() 返回一个新的 Promise 实例，状态和结果值与原本的状态和结果值一致
  • 当这个实例最终状态为 rejected ， .finally() 返回一个新的 Promise 实例，状态和结果值与这个 Promise 实例的状态和结果值一致
• 概况来说就是 .finally() 返回的 Promise 实例，状态和结果值与原本的状态和结果值一致，但是当 onFinally 返回了一个 rejected 的 Promise 实例时，这个错误会覆盖原来的结果

async 与 await

async 函数

• 返回值：始终是一个 Promise 对象
• 当 async 函数内 return 的值不是 Promise 实例时，return 的值会被 Promise.resolve 包装成一个新的 Promise 实例作为 async 函数的返回值

  const p1 = async () => {
    return 1
  }
  console.log(p1())
  

• 当 async 函数内 return 的值是一个 Promise 实例时，这个实例会被作为 async 函数的返回值

  const p2 = async () => {
    return Promise.reject('err')
  }
  console.log(p2())
  

await 表达式

• 右侧表达式：通常是 Promise 对象，但也可以是普通值
• await 会暂停 async 函数的执行，直到右侧的 Promise 敲定
  • 右侧是 Promise 实例
    • Promise 实例 fulfilled ，对应的 value 会被返回
    • Promise 实例 rejected ，会抛出错误
  • 右侧是不是 Promise 实例，await 会立即返回这个值(相当于 Promise.resolve(value))

    ;(async () => {
    try {
      const p1 = await 1
      console.log(p1)
      const p2 = await Promise.resolve('success')
      console.log(p2)
      const p3 = await Promise.reject('error')
      console.log(p3)
    } catch (e) {
      console.warn(e)
    }
    })()
    

注意事项

• await 必须写在 async 函数内部，但 async 函数中可以没有 await
• 如果 await 的 Promise 实例状态变为 rejected，await 表达式会抛出这个错误，需要 try…catch 捕获处理
• await 是 then 的语法糖
  • let data = await fetch(url); 等价于 let data = fetch(url).then(res => res);
• async 是返回一个 Promise 的语法糖
  • async function foo() { return 1; } 等价于 function foo() { return Promise.resolve(1); }