JavaScript Promise与异步处理

Promise 是 JavaScript 中处理异步操作的核心机制，通过状态管理和链式调用简化异步代码，async/await 进一步提升了代码可读性，配合常用方法可高效处理并发请求和错误。

• 状态机制Promise 有三种状态且不可逆：

  pending：初始状态，操作未完成。

  fulfilled：操作成功完成，触发 .then()。

  rejected：操作失败，触发 .catch()。状态变更仅能从 pending → fulfilled 或 pending → rejected。

• 基本用法通过构造函数创建 Promise 对象，传入执行器函数（含 resolve 和 reject 参数）：

  const myPromise = new Promise((resolve, reject) => { if (/* 操作成功 */) { resolve("成功结果"); // 状态变为 fulfilled } else { reject("失败原因"); // 状态变为 rejected }});

• .then() / .catch() / .finally()

  .then(onFulfilled)：接收 resolve 的值，返回新 Promise 以支持链式调用。

  .catch(onRejected)：捕获链中任一环节的 reject 或异常。

  .finally(onFinally)：无论成功失败均执行，常用于资源清理。

  myPromise .then(result => console.log(result)) // 处理成功结果 .catch(error => console.error(error)) // 捕获错误 .finally(() => console.log("操作完成")); // 清理操作

• 解决回调地狱通过链式调用替代多层嵌套回调，例如：

  fetchUserData() .then(userData => fetchUserPosts(userData.id)) .then(posts => displayPosts(posts)) .catch(err => console.error("加载失败:", err));

• 语法规则

  async 函数：返回一个 Promise 对象。

  await 表达式：仅在 async 函数内使用，暂停执行直到 Promise 完成。

  async function loadUserAndPosts() { try { const userData = await fetchUserData(); // 等待异步完成 const posts = await fetchUserPosts(userData.id); displayPosts(posts); } catch (error) { console.error("出错啦:", error); // 统一捕获错误 }}

• 优势

  代码逻辑更直观，类似同步执行。

  错误处理通过 try/catch 统一管理，避免分散的 .catch()。

• 静态方法

  Promise.resolve(value)：返回已成功的 Promise，值为 value。

  Promise.reject(reason)：返回已失败的 Promise，原因为 reason。

• 并发控制方法

  Promise.all([p1, p2, ...])：所有 Promise 成功时返回结果数组，任一失败则立即 reject。Promise.all([fetch('/api/user'), fetch('/api/config')]) .then(([userRes, configRes]) => { /* 处理响应 */ }) .catch(err => console.error("其中一个请求失败"));

  Promise.race([p1, p2, ...])：首个完成的 Promise（无论成功失败）决定结果。

  Promise.allSettled([p1, p2, ...])：等待所有 Promise 完成，返回结果数组（含 {status, value/reason}）。Promise.allSettled([fetch(url1), fetch(url2)]) .then(results => { results.forEach(result => { if (result.status === 'fulfilled') console.log(result.value); else console.error(result.reason); }); });

• 错误捕获

  在 Promise 链中，未捕获的 reject 会导致静默失败，务必添加 .catch() 或使用 try/catch（async/await）。

  Promise.all 会因单个失败而终止，若需部分失败仍继续，可结合 .map() + .catch() 单独处理每个请求。

• 性能优化

  并行请求优先使用 Promise.all，避免串行等待（如多个 await 连续调用）。

  对超时控制，可通过 Promise.race 结合 setTimeout 实现：function withTimeout(promise, timeout) { const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject("操作超时"), timeout) ); return Promise.race([promise, timeoutPromise]);}

• Promise 通过状态管理和链式调用解决了回调地狱问题，是异步编程的基础。
• async/await 以同步写法简化异步逻辑，推荐在复杂场景中使用。
• 并发方法（如 Promise.all）需根据业务需求选择，并注意错误处理和性能平衡。

掌握这些机制后，可编写出更健壮、易维护的异步代码，避免常见陷阱如静默失败或冗余嵌套。