JavaScript的Promise怎么用？如何解决回调地狱？

JavaScript的Promise用于处理异步操作，通过链式调用解决回调地狱问题，核心方法包括.then()、.catch()、.finally()，并提供Promise.all()、Promise.race()等静态方法。

• 核心作用：扁平化异步代码的嵌套结构（回调地狱），通过链式调用实现线性流程。
• 三种状态：

  pending（进行中）：初始状态，操作未完成。

  fulfilled（已成功）：操作成功完成。

  rejected（已失败）：操作失败。

• 状态不可逆：一旦从pending变为fulfilled或rejected，状态不再改变。

1. 创建Promise：

   使用new Promise((resolve, reject) => { ... })构造函数。

   异步操作成功时调用resolve(value)，失败时调用reject(error)。

   示例：

   const myPromise = new Promise((resolve, reject) => { setTimeout(() => { const success = Math.random() > 0.5; if (success) { resolve("数据成功获取！"); } else { reject("数据获取失败！"); } }, 1000);});

2. 链式调用：

   .then(onFulfilled, onRejected)：处理成功或失败结果（onRejected可省略，通常用.catch()替代）。

   .catch(onRejected)：捕获链中任何位置的错误。

   .finally(onFinally)：无论成功或失败均执行。

   示例：

   myPromise .then(result => { console.log("成功了:", result); return "下一步处理结果"; }) .then(nextResult => { console.log("链式调用：", nextResult); }) .catch(error => { console.error("出错了:", error); }) .finally(() => { console.log("无论成功失败，我都会执行。"); });

• 回调地狱问题：传统嵌套回调（如多层fetchData调用）导致代码难以维护。

  // 回调地狱示例fetchData(url1, function(data1) { processData1(data1, function(processedData1) { fetchData(url2, function(data2) { processData2(data2, function(processedData2) { // 更多嵌套... }); }); });});

• Promise解决方案：通过链式调用将嵌套转为线性流程。

  // Promise扁平化示例function fetchDataPromise(url) { return new Promise((resolve, reject) => { fetchData(url, (data) => resolve(data)); // 假设fetchData支持Promise });}fetchDataPromise(url1) .then(data1 => processData1(data1)) .then(processedData1 => fetchDataPromise(url2)) .then(data2 => processData2(data2)) .then(processedData2 => { // 无需嵌套，逻辑清晰 }) .catch(error => { console.error("统一错误处理:", error); });

1. 实例方法：

   .then(onFulfilled)：注册成功回调，返回新Promise。

   .catch(onRejected)：注册错误回调，等价于.then(null, onRejected)。

   .finally(onFinally)：注册最终回调，不改变原Promise结果。

2. 静态方法：

   Promise.all(iterable)：所有Promise成功时返回成功结果数组，任一失败则立即失败。

   Promise.all([ Promise.resolve(3), 1337, // 非Promise值会被包装 new Promise(resolve => setTimeout(() => resolve("hello"), 100))]).then(values => console.log(values)); // [3, 1337, "hello"]

   Promise.race(iterable)：首个解决的Promise决定结果（成功或失败）。

   Promise.resolve(value)：返回以value解析的Promise。

   Promise.reject(reason)：返回以reason拒绝的Promise。

• 错误传递：错误沿链向下传递，直到被.catch()捕获。
• 错误恢复：在.catch()中返回默认值或新Promise，使链继续执行。fetch("/api/data") .then(response => { if (!response.ok) throw new Error("HTTP错误"); return response.json(); }) .then(data => { if (!data.key) throw new Error("数据无效"); return processData(data); }) .catch(error => { console.error("捕获错误:", error); return getDefaultData(); // 返回默认值 }) .then(result => { console.log("最终结果:", result); // 可能来自错误恢复 });

1. 回调函数：最原始的异步模式，易导致回调地狱。
2. Promise：通过链式调用和状态管理解决回调嵌套问题。
3. Async/Await：Promise的语法糖，以同步风格编写异步代码。async function fetchData() { try { const response = await fetch("/api/data"); const data = await response.json(); return processData(data); } catch (error) { console.error("错误:", error); throw error; // 重新抛出供外部捕获 }}fetchData().then(result => console.log(result));

总结：Promise通过状态管理和链式调用解决了回调地狱问题，配合.then()、.catch()、.finally()及静态方法（如Promise.all()）高效处理异步流程。进一步可结合async/await提升代码可读性。