跳至主要內容

Promise 总结

2024/1/16前端

1. 为什么需要 Promise

解决回调地狱问题。

例如：多次的 HTTP Request，第一次请求获取 id，第二次请求根据 id 获取 username，第三次请求根据 username 获取 email。使用多个 .then() 可以优雅地解决这个问题。

2. Promise 实例

const p = new Promise((resolve, reject) =>{});

  • 创建 Promise 实例需要一个函数作为参数。这个函数又包含了两个参数：resolve, reject

  • Promise 实例有两个属性：state, result

    • state 有三个值：pending, fulfilled, rejected

2.1 Promise 的状态(state)

  • 调用 resolve，state => fulfilled

  • 调用 reject，state => rejected

  • Promise 的状态改变是一次性的，不能再次修改。

2.2 Promise 的结果(result)

  • resolve、reject 函数的参数，即为 Promise 的 result
const p = new Promise((resolve, reject) => {
  resolve("成功的结果");
  // reject("失败的结果")
})
console.dir(p)

3. then() 方法

  • then() 方法接受两个函数参数，第一个参数在成功时调用(相当于执行 resolve 函数)，第二个在失败时调用(相当于执行 reject 函数)。

  • then() 方法返回一个新的 Promise，其状态为 pending

  • 在 then() 方法中,通过 return 将返回的 Promise 实例改为 fulfilled 状态

  • 在 then 方法中，出现代码错误，会将返回的 Promise 实例改为 rejected 状态

4. catch() 方法

  • catch() 方法接受一个函数参数，相当于 then() 方法中的第二个函数参数。

5. 参考资料

@2025