JavaScript Promise 学习笔记

什么是 Promise？

Promise 是一种解决 JavaScript 中回调地狱（callback hell）问题的解决方案。在 ES6 中，Promise 作为官方标准被引入。

一个 Promise 表示一个异步操作的最终完成（或失败）及其结果值的表示。它有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

Promise 的基本用法

创建一个 Promise

使用 Promise 构造函数即可创建一个 Promise：

javascriptCopy Code
const myPromise = new Promise((resolve, reject) => {
  // 执行异步操作，例如发送 Ajax 请求等

  if (异步操作成功) {
    resolve(异步操作返回的数据);
  } else {
    reject(错误信息);
  }
});

调用 Promise 方法

Promise 支持 then、catch 和 finally 方法，分别对应 Promise 状态变为 fulfilled、rejected 和 settled（无论成功或失败）时的处理方法。

javascriptCopy Code
myPromise
  .then(data => {
    // Promise fulfilled 时执行的代码
  })
  .catch(error => {
    // Promise rejected 时执行的代码
  })
  .finally(() => {
    // Promise 完成后执行的代码
  });

Promise 实例

实现多个异步请求的并行处理

假设我们需要从两个不同的 API 中获取数据，可以通过 Promise.all 方法实现并行处理：

javascriptCopy Code
const promise1 = fetchDataFromApi1();
const promise2 = fetchDataFromApi2();

Promise.all([promise1, promise2])
  .then(([data1, data2]) => {
    // 两个 Promise 都成功时执行的代码，使用解构赋值获取结果
  })
  .catch(error => {
    // 任一一个 Promise 失败时执行的代码
  });

实现连续的异步请求处理

假设我们需要先通过 API 1 获取数据，然后再拿到数据中的某个字段作为参数调用 API 2 获取更多数据，可以通过 Promise.then 方法实现：

javascriptCopy Code
fetchDataFromApi1()
  .then(data1 => {
    const param = data1.someField;
    return fetchDataFromApi2(param);
  })
  .then(data2 => {
    // Promise 2 fulfilled 时执行的代码
  })
  .catch(error => {
    // 任意一个 Promise 失败时执行的代码
  });

参考资料

• MDN web docs - Promise