Promise基本使用与链式调用

在 JavaScript 中，Promise 是一种用于处理异步操作的机制。它代表了一个可能还没有完成但最终会返回结果的操作。Promise 使得异步代码的书写更加清晰，并避免了回调地狱的问题。通过 then 和 catch 等方法，可以实现异步操作的链式调用，使代码更加简洁和可维护。

1. Promise的基本概念

1.1 Promise 的状态

Promise 有三种状态：

• Pending（待定）：初始状态，表示异步操作尚未完成。
• Resolved（已完成）：表示异步操作成功完成，返回一个值。
• Rejected（已拒绝）：表示异步操作失败，返回一个错误原因。

1.2 创建一个 Promise

Promise 是通过构造函数创建的，构造函数接收一个执行器函数（executor），该函数有两个参数：resolve 和 reject，分别用于处理异步操作成功和失败的结果。

let promise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true;
  if (success) {
    resolve("操作成功");
  } else {
    reject("操作失败");
  }
});

2. Promise的基本使用

2.1 then 方法

then 方法用于指定异步操作成功时的回调函数。then 方法返回一个新的 Promise，可以链式调用。

let promise = new Promise((resolve, reject) => {
  resolve("操作成功");
});

promise.then((result) => {
  console.log(result);  // 输出: 操作成功
});

2.2 catch 方法

catch 方法用于指定异步操作失败时的回调函数。

let promise = new Promise((resolve, reject) => {
  reject("操作失败");
});

promise.catch((error) => {
  console.log(error);  // 输出: 操作失败
});

2.3 finally 方法

finally 方法不管异步操作是成功还是失败都会执行，通常用于清理工作。

let promise = new Promise((resolve, reject) => {
  resolve("操作成功");
});

promise
  .then((result) => {
    console.log(result);  // 输出: 操作成功
  })
  .finally(() => {
    console.log("清理工作");  // 输出: 清理工作
  });

3. Promise的链式调用

Promise 支持链式调用，多个 then 方法可以链接在一起，形成一个处理异步操作的流程。在每个 then 方法中，可以返回一个新的 Promise，从而实现更复杂的异步操作链。

let promise = new Promise((resolve, reject) => {
  resolve("操作开始");
});

promise
  .then((result) => {
    console.log(result);  // 输出: 操作开始
    return "第一步完成";
  })
  .then((result) => {
    console.log(result);  // 输出: 第一部完成
    return "第二步完成";
  })
  .then((result) => {
    console.log(result);  // 输出: 第二步完成
  })
  .catch((error) => {
    console.log(error);  // 处理错误
  });

代码解析：

1. 第一个 then：接收到“操作开始”的结果后，返回一个新的字符串“第一步完成”。
2. 第二个 then：接收到第一个 then 返回的值“第一步完成”，并继续返回“第二步完成”。
3. catch：用于捕获整个 Promise 链中发生的任何错误。

4. Promise.all与Promise.race

4.1 Promise.all：多个 Promise 并行执行

Promise.all 用于将多个 Promise 实例包装成一个新的 Promise，该新 Promise 的状态由所有原 Promise 实例的状态决定，只有当所有的 Promise 都成功时，Promise.all 才会成功。

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("任务1完成"), 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("任务2完成"), 2000);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results);  // 输出: ["任务1完成", "任务2完成"]
});

4.2 Promise.race：多个 Promise 中最先完成的一个

Promise.race 用于返回第一个完成的 Promise，如果其中一个 Promise 成功或失败，race 返回的 Promise 就会结束。

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("任务1完成"), 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("任务2完成"), 500);
});

Promise.race([promise1, promise2]).then((result) => {
  console.log(result);  // 输出: 任务2完成
});

5. 总结

Promise 是处理 JavaScript 异步操作的重要工具，通过 resolve 和 reject，Promise 将异步操作的成功或失败封装成对象，使得异步操作的管理变得更加直观和易于维护。通过链式调用，开发者能够更容易地组织和控制复杂的异步操作流程。此外，Promise.all 和 Promise.race 等方法可以帮助开发者更高效地处理多个异步操作。