JS `Promise` 链式调用与错误捕获：避免 `Promise` 地狱

哈喽，大家好！今天咱们来聊聊 JavaScript 中 Promise 的链式调用和错误捕获，目标是：告别让人头皮发麻的 "Promise 地狱"，写出优雅又健壮的异步代码。

开场白：Promise，你真的懂了吗？

Promise 这玩意儿，自从它横空出世，就成了 JavaScript 异步编程的标准姿势。但很多小伙伴对它的理解，可能还停留在“解决回调地狱”这个层面。诚然，Promise 的出现，让代码可读性大大提升。但如果使用不当，一样会掉进另一场“Promise 地狱”。

想想看，嵌套 N 层的 .then()，这跟嵌套 N 层的回调函数，有本质区别吗？只不过是换了个马甲，本质还是回调啊！

所以，今天咱们要深入挖掘 Promise 的精髓，掌握链式调用的正确姿势，以及如何优雅地进行错误处理，让你的异步代码不再是噩梦。

第一章：Promise 的基本操作：温故而知新

在深入链式调用之前，我们先快速回顾一下 Promise 的基本概念和用法。

• Promise 的三种状态：

  • pending (进行中): Promise 对象创建时的初始状态。
  • fulfilled (已成功): Promise 操作成功完成。
  • rejected (已失败): Promise 操作失败。

• 创建 Promise：

  const myPromise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const success = Math.random() > 0.5; // 随机决定成功或失败
      if (success) {
        resolve("操作成功!"); // 标记 Promise 为 fulfilled 状态
      } else {
        reject("操作失败!"); // 标记 Promise 为 rejected 状态
      }
    }, 1000);
  });

• 处理 Promise 的结果：

  • .then()：用于处理 Promise 成功（fulfilled）的结果。
  • .catch()：用于处理 Promise 失败（rejected）的结果。
  • .finally()：无论 Promise 成功或失败，都会执行的回调函数（ES2018 新增）。

  myPromise
    .then(result => {
      console.log("成功:", result);
    })
    .catch(error => {
      console.error("失败:", error);
    })
    .finally(() => {
      console.log("无论成功与否，我都执行!");
    });

第二章：Promise 链式调用：优雅的异步编排

Promise 链式调用是 Promise 的精髓所在，也是避免 "Promise 地狱" 的关键。

2.1 什么是链式调用？

简单来说，链式调用就是在一个 .then() 或 .catch() 方法之后，继续调用另一个 .then() 或 .catch() 方法。

2.2 链式调用的原理：

• .then() 和 .catch() 方法都会返回一个新的 Promise 对象。
• 这个新的 Promise 对象的状态，取决于上一个 .then() 或 .catch() 方法的回调函数的返回值：
  • 如果回调函数返回一个值（非 Promise），则新的 Promise 对象的状态变为 fulfilled，值为回调函数的返回值。
  • 如果回调函数返回一个 Promise 对象，则新的 Promise 对象的状态和值，与回调函数返回的 Promise 对象相同。
  • 如果回调函数抛出一个错误，则新的 Promise 对象的状态变为 rejected，值为抛出的错误。

2.3 链式调用的优势：

• 代码更简洁： 将多个异步操作串联起来，避免了嵌套的回调函数。
• 流程更清晰： 可以清晰地看到异步操作的执行顺序。
• 错误处理更集中： 可以使用一个 .catch() 方法来捕获整个 Promise 链中的错误。

2.4 链式调用的示例：

假设我们需要完成以下三个异步操作：

1. 从服务器获取用户 ID。
2. 根据用户 ID 获取用户信息。
3. 将用户信息显示在页面上。

function getUserID() {
  return new Promise(resolve => {
    setTimeout(() => {
      const userID = 123;
      console.log("1. 获取用户 ID:", userID);
      resolve(userID);
    }, 500);
  });
}

function getUserInfo(userID) {
  return new Promise(resolve => {
    setTimeout(() => {
      const userInfo = { id: userID, name: "张三", age: 30 };
      console.log("2. 获取用户信息:", userInfo);
      resolve(userInfo);
    }, 500);
  });
}

function displayUserInfo(userInfo) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("3. 显示用户信息:", userInfo);
      resolve("显示完成");
    }, 500);
  });
}

// 使用链式调用：
getUserID()
  .then(userID => getUserInfo(userID))
  .then(userInfo => displayUserInfo(userInfo))
  .then(message => {
    console.log("完成:", message);
  })
  .catch(error => {
    console.error("发生错误:", error);
  });

在这个例子中，我们使用链式调用将三个异步操作串联起来。每个 .then() 方法都返回一个新的 Promise 对象，并将上一个 Promise 对象的结果传递给下一个 .then() 方法。

2.5 避免 "Promise 地狱" 的关键：

• 将每个异步操作封装成一个独立的 Promise 函数。 这样可以提高代码的可读性和可维护性。
• 避免在 .then() 方法中嵌套 Promise。 如果需要在 .then() 方法中执行另一个异步操作，应该返回一个新的 Promise 对象，而不是直接在 .then() 方法中创建 Promise。
• 合理使用 async/await。 async/await 是 ES2017 引入的语法糖，可以更简洁地编写异步代码。 后面会详细讲。

第三章：Promise 错误处理：让你的代码更健壮

错误处理是异步编程中非常重要的一部分。如果不对 Promise 的错误进行处理，可能会导致程序崩溃或出现不可预测的行为。

3.1 Promise 的错误类型：

• 显式 reject： 在 Promise 的 executor 函数中调用 reject() 方法。
• 隐式 reject： 在 .then() 或 .catch() 方法的回调函数中抛出一个错误。

3.2 错误处理的方式：

• .catch() 方法： 用于捕获 Promise 链中的所有错误。
• .then(null, errorHandler) 方法： .then() 方法的第二个参数也可以是一个错误处理函数，但这种方式不常用，因为容易出错。
• try...catch 语句： 可以在 async/await 中使用 try...catch 语句来捕获错误。

3.3 错误处理的原则：

• 始终处理 Promise 的错误。 不要忽略任何 Promise 的错误。
• 将错误处理放在 Promise 链的末尾。 这样可以集中处理所有错误。
• 使用 instanceof 运算符来判断错误的类型。 可以根据错误的类型来采取不同的处理方式。
• 重新抛出错误。 如果无法处理某个错误，应该将它重新抛出，让上层调用者来处理。

3.4 错误处理的示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve("数据获取成功!");
      } else {
        reject(new Error("数据获取失败!")); // 抛出 Error 对象
      }
    }, 500);
  });
}

fetchData()
  .then(data => {
    console.log("数据:", data);
    // 模拟一个可能出错的操作
    if (data === "数据获取成功!") {
      throw new Error("模拟操作出错!"); // 抛出 Error 对象
    }
  })
  .catch(error => {
    console.error("发生错误:", error);
    console.error("错误类型:", error.constructor.name); // 获取错误类型
    if (error instanceof Error) {
      console.log("这是一个 Error 对象");
    }
    // 可以根据错误类型进行不同的处理
    if (error.message === "数据获取失败!") {
      console.log("尝试重新获取数据...");
      // 可以尝试重新发起请求
    } else {
      console.log("无法处理此错误，上报给服务器...");
      // 可以将错误信息上报给服务器
    }
  })
  .finally(() => {
    console.log("清理操作...");
  });

在这个例子中，我们使用 .catch() 方法来捕获 Promise 链中的所有错误。在 .catch() 方法中，我们使用 instanceof 运算符来判断错误的类型，并根据错误的类型来采取不同的处理方式。

第四章：async/await：Promise 的语法糖

async/await 是 ES2017 引入的语法糖，可以更简洁地编写异步代码，本质上是 Promise 的一种更优雅的写法。

4.1 async 函数：

• async 关键字用于声明一个异步函数。
• async 函数会隐式地返回一个 Promise 对象。
• 如果在 async 函数中返回一个值（非 Promise），则该值会被 Promise.resolve() 包装成一个 Promise 对象。
• 如果在 async 函数中抛出一个错误，则该错误会被 Promise.reject() 包装成一个 Promise 对象。

4.2 await 表达式：

• await 关键字用于等待一个 Promise 对象的结果。
• await 表达式只能在 async 函数中使用。
• await 表达式会暂停 async 函数的执行，直到 Promise 对象的状态变为 fulfilled 或 rejected。
• 如果 Promise 对象的状态变为 fulfilled，则 await 表达式会返回 Promise 对象的值。
• 如果 Promise 对象的状态变为 rejected，则 await 表达式会抛出 Promise 对象的错误。

4.3 async/await 的优势：

• 代码更简洁： 避免了大量的 .then() 和 .catch() 方法。
• 代码更易读： 异步代码看起来像同步代码一样。
• 错误处理更方便： 可以使用 try...catch 语句来捕获错误。

4.4 async/await 的示例：

我们用 async/await 重写上面的例子：

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve("数据获取成功!");
      } else {
        reject(new Error("数据获取失败!"));
      }
    }, 500);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log("数据:", data);
    // 模拟一个可能出错的操作
    if (data === "数据获取成功!") {
      throw new Error("模拟操作出错!");
    }
  } catch (error) {
    console.error("发生错误:", error);
    if (error instanceof Error) {
      console.log("这是一个 Error 对象");
    }
  } finally {
    console.log("清理操作...");
  }
}

main();

在这个例子中，我们使用 async/await 关键字将异步代码写得像同步代码一样。我们使用 try...catch 语句来捕获错误，这比使用 .catch() 方法更加方便。

第五章：Promise 的最佳实践

• 使用 Promise.all() 处理并发请求：

  如果需要同时发起多个请求，可以使用 Promise.all() 方法。Promise.all() 方法接收一个 Promise 数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于 Promise 数组中的所有 Promise 对象的状态：

  • 如果 Promise 数组中的所有 Promise 对象的状态都变为 fulfilled，则新的 Promise 对象的状态变为 fulfilled，值为一个包含所有 Promise 对象值的数组。
  • 如果 Promise 数组中有一个 Promise 对象的状态变为 rejected，则新的 Promise 对象的状态变为 rejected，值为第一个变为 rejected 的 Promise 对象的错误。

  async function fetchMultipleData() {
    const promise1 = fetchData();
    const promise2 = fetchData();
    const promise3 = fetchData();
  
    try {
      const results = await Promise.all([promise1, promise2, promise3]);
      console.log("所有数据获取成功:", results);
    } catch (error) {
      console.error("有一个或多个请求失败:", error);
    }
  }
  
  fetchMultipleData();

• 使用 Promise.race() 获取最快的结果：

  如果只需要获取多个请求中最快的结果，可以使用 Promise.race() 方法。Promise.race() 方法接收一个 Promise 数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于 Promise 数组中最先改变状态的 Promise 对象：

  • 如果 Promise 数组中最先改变状态的 Promise 对象的状态变为 fulfilled，则新的 Promise 对象的状态变为 fulfilled，值为该 Promise 对象的值。
  • 如果 Promise 数组中最先改变状态的 Promise 对象的状态变为 rejected，则新的 Promise 对象的状态变为 rejected，值为该 Promise 对象的错误。

  async function fetchFastestData() {
    const promise1 = fetchData();
    const promise2 = new Promise((resolve, reject) => {
      setTimeout(() => reject("Promise 2 超时"), 200);
    }); // 模拟一个超时的 Promise
  
    try {
      const result = await Promise.race([promise1, promise2]);
      console.log("最快的结果:", result);
    } catch (error) {
      console.error("最快的请求失败:", error);
    }
  }
  
  fetchFastestData();

• 避免在循环中使用 await：

  在循环中使用 await 会导致性能问题，因为每次迭代都需要等待上一次迭代完成。可以使用 Promise.all() 方法来并发执行循环中的异步操作。

  async function processData(dataArray) {
    const promises = dataArray.map(async data => {
      // 对每个数据进行异步处理
      await someAsyncOperation(data);
      return data;
    });
  
    try {
      const results = await Promise.all(promises);
      console.log("所有数据处理完成:", results);
    } catch (error) {
      console.error("处理过程中发生错误:", error);
    }
  }

第六章：总结与展望

Promise 和 async/await 是 JavaScript 异步编程的基石。掌握它们的使用方法，可以让你写出更简洁、更易读、更健壮的异步代码。

特性	Promise	async/await	优点	缺点
语法	.then(), .catch(), .finally()	async, await, try...catch
可读性	相对较好	更好	代码更易读，更像同步代码	需要理解 async 函数和 await 表达式的概念
错误处理	.catch() 集中处理	try...catch 块状处理	可以使用标准的 try...catch 语句进行错误处理
适用场景	简单的异步操作，对代码简洁性要求不高的情况	复杂的异步流程，需要清晰的控制流程和方便的错误处理的情况

希望通过今天的讲解，大家能够对 Promise 有更深入的理解，并在实际开发中灵活运用。记住，编写异步代码的关键是：理清逻辑，封装函数，合理利用 Promise 链式调用和 async/await，并做好充分的错误处理。

好了，今天的分享就到这里，大家有什么问题可以提问！