深入理解 JavaScript 中的 Promise 异步操作

深入理解 JavaScript 中的 Promise 异步操作

在现代 JavaScript 开发中，异步操作是必不可少的部分。Promise 是管理异步代码的一种重要机制，它为解决回调地狱（Callback Hell）问题提供了强大的支持。本文将详细讲解 Promise 的概念、用法、以及在实际开发中的应用场景。

---

什么是 Promise？

Promise 是一种用于处理异步操作的对象，它代表一个操作的最终完成（或失败）及其结果值。Promise 有以下三种状态：

1. Pending: 初始状态，操作尚未完成。
2. Fulfilled: 操作成功完成，返回结果值。
3. Rejected: 操作失败，返回失败原因。

状态一旦从 Pending 转为 Fulfilled 或 Rejected，就不能再次更改。

---

创建一个 Promise

创建一个 Promise 对象需要传入一个函数，该函数接收两个参数：resolve 和 reject。resolve 表示成功时调用，reject 表示失败时调用。

示例：创建一个简单的 Promise

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  
  if (success) {
    resolve("Operation Successful");
  } else {
    reject("Operation Failed");
  }
});

---

Promise 的链式调用

Promise 提供了 .then()、.catch() 和 .finally() 方法来处理结果或错误。

.then() 用于处理成功的结果，可以进行链式调用。
.catch() 方法用于捕获 Promise 中抛出的错误。
.finally() 方法无论 Promise 成功或失败都会执行，用于清理资源。

myPromise
  .then((result) => {
    console.log(result); // 输出: Operation Successful
    return "Next Step";
  })
  .then((nextResult) => {
    console.log(nextResult); // 输出: Next Step
  })
  .catch((error) => {
    console.error(error); // 捕获错误
  })
  .finally(() => {
    console.log("Cleanup complete");
  });

---

Promise.all、Promise.race 和 Promise.any

1. Promise.all

Promise.all 接受一个包含多个 Promise 的数组，当所有 Promise 都成功时，返回一个包含所有结果的数组；如果其中一个失败，则直接返回失败。

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3]).then((results) => {
  console.log(results); // 输出: [1, 2, 3]
});

2. Promise.race

Promise.race 返回第一个完成的 Promise，无论成功还是失败。

const p1 = new Promise((resolve) => setTimeout(() => resolve("P1"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("P2"), 500));

Promise.race([p1, p2]).then((result) => {
  console.log(result); // 输出: P2
});

3. Promise.any

Promise.any 返回第一个成功的 Promise，如果所有都失败，则返回一个包含所有失败原因的 AggregateError。

const p1 = Promise.reject("Error 1");
const p2 = Promise.resolve("Success 2");
const p3 = Promise.reject("Error 3");

Promise.any([p1, p2]).then((result) => {
console.log(result); // 输出: Success 2
});
Promise.any([p1,p3]).then((result) => {
console.log(result);  
// 输出: [AggregateError: All promises were rejected] {  [errors]: [ 'Error 1', 'Error 3' ]}
});

---

与 async/await 的结合

async/await 是基于 Promise 的语法糖，能够让异步代码看起来像同步代码，提高代码的可读性。

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

---

常见问题与注意事项

1. 忘记捕获错误

始终使用 .catch() 或 try...catch 捕获错误，避免未处理的 Promise 错误导致程序崩溃。

2. 错误冒泡

避免在 Promise 内部嵌套其他 Promise，推荐使用链式调用。

链式调用时，使用 .catch() 捕获错误，如果链条中间出现错误，错误会自动冒泡到第一个 .catch() （即catch前的then语句块中的代码都会被跳过不执行）。

并且只有第一个捕获到错误的.catch() 会处理它，后续的 .catch() 不会被触发，除非第一个 .catch() 内抛出了新的错误。

而使用 try...catch 和 async...await捕获错误。对于多个异步操作，可以对每一步单独捕获错误，或者统一捕获。
示例：

fetch("https://api.example.com/data")
  .then((response) => {
    console.log("Response received");
    throw new Error("Something went wrong!"); // 抛出一个错误
  })
  .then(() => {
    console.log("这个then语句块的操作会被跳过"); //catch前的都会跳过
  })
  .catch((error) => {
    console.log("Caught an error:", error.message); // 捕获并处理错误
  })
  .then(() => {
    console.log("在catch后的then依然");
  });

3. 微任务与宏任务

Promise 的回调是微任务，比 setTimeout 等宏任务优先执行。

console.log("Start");

Promise.resolve().then(() => {
  console.log("Promise");
});

setTimeout(() => {
  console.log("Timeout");
}, 0);

console.log("End");

// 输出顺序:
// Start
// End
// Promise
// Timeout

---