精通 JavaScript Promise：提升代码可读性与维护性 – wiki基地

作者： /

精通 JavaScript Promise：提升代码可读性与维护性

在现代 Web 开发中，异步编程是不可或缺的一环。从用户交互、数据获取到动画效果，JavaScript 大量依赖异步操作来保证页面的流畅性和响应性。然而，传统的异步回调（Callback）机制在处理复杂的异步流程时，往往会导致所谓的“回调地狱”（Callback Hell），使得代码难以阅读、理解和维护。Promise 的出现，正是为了解决这一痛点，它提供了一种更优雅、更结构化的方式来管理异步操作，从而显著提升代码的可读性和维护性。

一、异步编程的痛点：回调地狱

在 Promise 普及之前，JavaScript 主要通过回调函数来处理异步操作。例如，发起一个 AJAX 请求，成功后执行一个回调，失败后执行另一个回调：

“`javascript
function fetchData(url, successCallback, errorCallback) {
// 模拟网络请求
setTimeout(() => {
if (Math.random() > 0.2) {
const data = { message: “数据获取成功来自 ” + url };
successCallback(data);
} else {
errorCallback(new Error(“网络请求失败”));
}
}, 1000);
}

// 场景：依次请求三个URL，并处理数据
fetchData(
“/api/data1”,
function (data1) {
console.log(“第一个请求成功:”, data1.message);
// 对data1进行处理…
const processedData1 = data1.message.toUpperCase();

fetchData(
  "/api/data2",
  function (data2) {
    console.log("第二个请求成功:", data2.message);
    // 对data2进行处理...
    const processedData2 = processedData1 + " & " + data2.message.toUpperCase();

    fetchData(
      "/api/data3",
      function (data3) {
        console.log("第三个请求成功:", data3.message);
        // 对data3进行处理...
        const finalResult = processedData2 + " & " + data3.message.toUpperCase();
        console.log("最终结果:", finalResult);
      },
      function (error3) {
        console.error("第三个请求失败:", error3.message);
      }
    );
  },
  function (error2) {
    console.error("第二个请求失败:", error2.message);
  }
);

},
function (error1) {
console.error(“第一个请求失败:”, error1.message);
}
);
“`

上述代码中，多个异步操作相互依赖，形成层层嵌套的回调。这种“金字塔”结构就是典型的“回调地狱”。其缺点显而易见：

  1. 可读性差：代码横向发展，逻辑关系不清晰，难以追踪执行流程。
  2. 维护性低：修改其中一个异步步骤或增加新的步骤，都可能需要改动多层嵌套，容易出错。
  3. 错误处理困难：每个异步操作都需要单独处理错误，代码冗余，且容易遗漏。

二、Promise：异步编程的救星

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

  1. Pending（进行中）：初始状态，既不是成功，也不是失败。
  2. Fulfilled（已成功）：意味着操作成功完成。此时 Promise 有一个“值”（value）。
  3. Rejected（已失败）：意味着操作失败。此时 Promise 有一个“原因”（reason），通常是一个 Error 对象。

一个 Promise 对象从 Pending 状态只能转换为 Fulfilled 或 Rejected 状态，并且这种转换是单向的，不可逆的。

1. 创建 Promise

我们可以使用 new Promise() 构造函数来创建一个 Promise 实例。构造函数接受一个执行器函数（executor）作为参数。这个执行器函数会立即执行，并接收两个参数：resolve 和 reject。

  • resolve(value)：当异步操作成功时调用，将 Promise 的状态从 Pending 变为 Fulfilled，并将操作结果 value 传递出去。
  • reject(reason)：当异步操作失败时调用，将 Promise 的状态从 Pending 变为 Rejected，并将失败原因 reason 传递出去。

javascript
function fetchDataWithPromise(url) {
return new Promise((resolve, reject) => {
console.log(`开始请求: ${url}`);
// 模拟网络请求
setTimeout(() => {
if (Math.random() > 0.2) {
const data = { message: "数据获取成功来自 " + url };
resolve(data); // 操作成功
} else {
reject(new Error(`网络请求失败: ${url}`)); // 操作失败
}
}, 1000);
});
}

2. 消费 Promise：then(), catch(), finally()

Promise 实例提供了以下方法来处理异步操作的结果：

  • then(onFulfilled, onRejected)：

    • onFulfilled：当 Promise 状态变为 Fulfilled 时调用的回调函数，接收 Promise 的成功值作为参数。
    • onRejected：当 Promise 状态变为 Rejected 时调用的回调函数，接收 Promise 的失败原因作为参数。这个参数是可选的，如果省略，则错误会向后传递。
    • then() 方法会返回一个新的 Promise，这是实现链式调用的关键。

  • catch(onRejected)：

    • 本质上是 then(null, onRejected) 的语法糖，专门用于捕获 Promise 链中任何一个环节发生的错误。
    • 它也返回一个新的 Promise。

  • finally(onFinally)：

    • 无论 Promise最终状态是 Fulfilled 还是 Rejected，onFinally 回调都会被执行。
    • 它不接收任何参数，通常用于执行一些清理工作，如关闭加载动画、释放资源等。
    • finally() 同样返回一个新的 Promise，其状态和值（或原因）通常会延续 finally() 之前的 Promise。如果 onFinally 回调返回了一个 rejected Promise 或者抛出错误，那么 finally() 返回的 Promise 会是 rejected 状态，并且值为该错误。

使用 Promise 改造之前的回调地狱示例：

javascript
fetchDataWithPromise("/api/data1")
.then(data1 => {
console.log("第一个请求成功:", data1.message);
const processedData1 = data1.message.toUpperCase();
// then方法中返回一个新的Promise，实现链式调用
return fetchDataWithPromise("/api/data2").then(data2 => {
// 为了演示链式处理，这里嵌套了一下，但更好的方式是直接返回Promise
return { processedData1, data2 };
});
})
.then(result => {
// result 包含了 { processedData1, data2 }
const { processedData1, data2 } = result;
console.log("第二个请求成功:", data2.message);
const processedData2 = processedData1 + " & " + data2.message.toUpperCase();
return fetchDataWithPromise("/api/data3").then(data3 => {
return { processedData2, data3 };
});
})
.then(result => {
const { processedData2, data3 } = result;
console.log("第三个请求成功:", data3.message);
const finalResult = processedData2 + " & " + data3.message.toUpperCase();
console.log("最终结果:", finalResult);
})
.catch(error => {
// 捕获链中任何一个环节的错误
console.error("发生错误:", error.message);
})
.finally(() => {
console.log("所有异步操作已尝试完成（无论成功或失败）。");
});

上述代码通过 then() 的链式调用，将嵌套结构扁平化，使得代码逻辑从上到下依次执行，可读性大大增强。错误处理也通过单一的 catch() 集中管理。

更优雅的链式调用：

在 then 回调中，如果返回的是一个 Promise，那么后续的 then 会等待这个 Promise 完成。如果返回的是一个普通值，那么这个值会立即传递给下一个 then。

“`javascript
let accumulatedData = “”;

fetchDataWithPromise(“/api/data1”)
.then(data1 => {
console.log(“第一个请求成功:”, data1.message);
accumulatedData = data1.message.toUpperCase();
return fetchDataWithPromise(“/api/data2”); // 直接返回下一个Promise
})
.then(data2 => {
console.log(“第二个请求成功:”, data2.message);
accumulatedData += ” & ” + data2.message.toUpperCase();
return fetchDataWithPromise(“/api/data3”); // 直接返回下一个Promise
})
.then(data3 => {
console.log(“第三个请求成功:”, data3.message);
accumulatedData += ” & ” + data3.message.toUpperCase();
console.log(“最终结果:”, accumulatedData);
})
.catch(error => {
console.error(“发生错误:”, error.message);
// 可以在这里进行错误上报或用户提示
})
.finally(() => {
console.log(“所有异步操作已尝试完成（无论成功或失败）。”);
// 可以在这里重置加载状态等
});
``
这种写法更加清晰，每个then` 负责处理当前异步操作的结果，并启动下一个异步操作。

三、Promise 的静态方法

Promise 对象本身也提供了一些有用的静态方法，用于处理多个 Promise 的组合：

  1. Promise.all(iterable)：

    • 接收一个可迭代对象（如数组）作为参数，其中包含多个 Promise 实例。
    • 并发执行所有 Promise。
    • 当所有 Promise 都变为 Fulfilled 状态时，Promise.all() 返回的 Promise 才会变为 Fulfilled，并且其成功值是一个数组，包含了所有输入 Promise 的成功值（按原始顺序排列）。
    • 只要有一个 Promise 变为 Rejected 状态，Promise.all() 返回的 Promise 就会立即变为 Rejected，并且其失败原因是第一个失败的 Promise 的原因。

    “`javascript
    const promise1 = fetchDataWithPromise(“/api/user/1”);
    const promise2 = fetchDataWithPromise(“/api/product/A”);
    const promise3 = new Promise(resolve => setTimeout(() => resolve(“静态数据”), 500));

    Promise.all([promise1, promise2, promise3])
    .then(results => {
    // results 是一个数组: [resultFromPromise1, resultFromPromise2, resultFromPromise3]
    console.log(“所有Promise都成功:”, results);
    const [userData, productData, staticData] = results;
    console.log(“用户数据:”, userData.message);
    console.log(“产品数据:”, productData.message);
    console.log(“静态数据:”, staticData);
    })
    .catch(error => {
    console.error(“Promise.all中至少一个失败:”, error.message);
    });
    ``Promise.all()` 适用于需要等待多个互不依赖的异步操作都完成后再进行下一步处理的场景。

  2. Promise.race(iterable)：

    • 同样接收一个可迭代的 Promise 对象。
    • 当可迭代对象中的任何一个 Promise 率先变为 Fulfilled 或 Rejected 状态时，Promise.race() 返回的 Promise 就会以相同的状态和值（或原因）落定。
    • 可以用于实现超时控制：

    ``javascript
    function fetchWithTimeout(url, timeoutMs) {
    const fetchPromise = fetchDataWithPromise(url);
    const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error(    请求超时: ${url} 未在 ${timeoutMs}ms 内响应`)), timeoutMs);
    });

    return Promise.race([fetchPromise, timeoutPromise]);
    }

    fetchWithTimeout(“/api/slow-resource”, 2000) // 设置2秒超时
    .then(data => console.log(“数据获取成功:”, data.message))
    .catch(error => console.error(“操作失败或超时:”, error.message));
    “`

  3. Promise.allSettled(iterable)：

    • 接收一个可迭代的 Promise 对象。
    • 与 Promise.all() 不同，它会等待所有输入的 Promise 都落定（无论是 Fulfilled 还是 Rejected）。
    • Promise.allSettled() 返回的 Promise 总是会变为 Fulfilled 状态，其成功值是一个数组，每个元素描述了对应 Promise 的结果。
    • 每个结果对象具有以下形式之一：
      • { status: 'fulfilled', value: ... }
      • { status: 'rejected', reason: ... }

    “`javascript
    const p1 = fetchDataWithPromise(“/api/data/good”);
    const p2 = new Promise((_, reject) => setTimeout(() => reject(new Error(“某个操作失败了”)), 500));
    const p3 = Promise.resolve(“立即成功”);

    Promise.allSettled([p1, p2, p3])
    .then(results => {
    console.log(“所有Promise都已落定:”, results);
    results.forEach(result => {
    if (result.status === ‘fulfilled’) {
    console.log(成功: ${JSON.stringify(result.value)});
    } else {
    console.error(失败: ${result.reason.message});
    }
    });
    });
    // 输出示例 (顺序可能不同，取决于fetchDataWithPromise的随机性):
    // 所有Promise都已落定: [
    // { status: ‘fulfilled’, value: { message: ‘数据获取成功来自 /api/data/good’ } },
    // { status: ‘rejected’, reason: Error: 某个操作失败了 at …},
    // { status: ‘fulfilled’, value: ‘立即成功’ }
    // ]
    ``Promise.allSettled()` 适用于当你关心所有异步操作的结果，无论成功与否，例如在批量操作后展示每个操作的状态。

  4. Promise.any(iterable) (ES2021):

    • 接收一个可迭代的 Promise 对象。
    • 只要可迭代对象中有一个 Promise 变为 Fulfilled，Promise.any() 返回的 Promise 就会以第一个 Fulfilled 的 Promise 的值 Fulfilled。
    • 如果所有输入的 Promise 都变为 Rejected，则 Promise.any() 返回的 Promise 会以一个 AggregateError 对象 Rejected，该对象的 errors 属性是一个数组，包含了所有输入 Promise 的失败原因。

    “`javascript
    const promiseFast = new Promise(resolve => setTimeout(() => resolve(“快速成功”), 100));
    const promiseSlow = new Promise(resolve => setTimeout(() => resolve(“慢速成功”), 500));
    const promiseFail = new Promise((_, reject) => setTimeout(() => reject(new Error(“请求失败”)), 200));

    Promise.any([promiseFail, promiseSlow, promiseFast])
    .then(value => {
    console.log(“第一个成功的Promise:”, value); // 输出: 快速成功
    })
    .catch(error => {
    // 只有当所有Promise都reject时才会进入这里
    if (error instanceof AggregateError) {
    console.error(“所有Promise都失败了:”, error.errors.map(e => e.message));
    } else {
    console.error(“发生意外错误:”, error);
    }
    });
    ``Promise.any()` 适用于你只需要多个异步源中的任何一个成功即可的场景，例如从多个镜像服务器获取同一个资源。

四、Promise 与 async/await：更同步化的异步代码

虽然 Promise 链式调用已经大大改善了异步代码的结构，但 ES2017 引入的 async/await 语法糖，使得异步代码的编写体验几乎与同步代码无异。

  • async 函数：

    • 使用 async 关键字声明的函数会自动返回一个 Promise。
    • 如果在 async 函数中 return 一个值，那么这个 Promise 会以该值 Fulfilled。
    • 如果在 async 函数中 throw 一个错误，那么这个 Promise 会以该错误 Rejected。

  • await 操作符：

    • await 只能在 async 函数内部使用。
    • 它会暂停 async 函数的执行，等待其后的 Promise 落定。
    • 如果 Promise Fulfilled，await 会返回 Promise 的成功值。
    • 如果 Promise Rejected，await 会抛出 Promise 的失败原因（可以被 try...catch 捕获）。

使用 async/await 改造之前的链式调用示例：

“`javascript
async function processAllData() {
let accumulatedData = “”;
try {
console.log(“开始处理所有数据…”);

const data1 = await fetchDataWithPromise("/api/data1");
console.log("第一个请求成功:", data1.message);
accumulatedData = data1.message.toUpperCase();

const data2 = await fetchDataWithPromise("/api/data2");
console.log("第二个请求成功:", data2.message);
accumulatedData += " & " + data2.message.toUpperCase();

const data3 = await fetchDataWithPromise("/api/data3");
console.log("第三个请求成功:", data3.message);
accumulatedData += " & " + data3.message.toUpperCase();

console.log("最终结果:", accumulatedData);
return accumulatedData; // async函数返回的Promise会以这个值fulfilled

} catch (error) {
console.error(“在 processAllData 中发生错误:”, error.message);
throw error; // 可以选择重新抛出错误，让调用者处理
} finally {
console.log(“processAllData 执行完毕。”);
}
}

// 调用 async 函数
processAllData()
.then(result => {
console.log(“processAllData 成功完成，结果:”, result);
})
.catch(error => {
console.error(“processAllData 外部捕获到错误:”, error.message);
})
.finally(() => {
console.log(“调用 processAllData 的Promise链结束。”);
});
“`

async/await 的优势：

  1. 同步化写法：代码逻辑清晰，几乎和同步代码一样直观。
  2. 错误处理：可以使用标准的 try...catch 结构来捕获 await 抛出的错误，非常自然。
  3. 调试方便：在调试器中可以像同步代码一样单步执行。

需要注意的是，async/await 本质上是 Promise 的语法糖，底层依然是 Promise 在工作。

五、Promise 最佳实践与注意事项

  1. 总是返回 Promise：在 .then() 或 .catch() 回调中，如果进行异步操作，确保返回一个新的 Promise。如果只是同步操作，返回一个值或不返回（即 undefined），也会被包装成一个 Fulfilled Promise。

  2. 避免 Promise 构造函数反模式：

    • 错误示例：在已经有 Promise 的情况下，不必要地使用 new Promise 包装。
      javascript
      // 反模式
      function getUserDetails(userId) {
      return new Promise((resolve, reject) => { // 不必要的Promise包装
      fetchDataWithPromise(`/api/users/${userId}`)
      .then(user => resolve(user))
      .catch(err => reject(err));
      });
      }
      // 正确做法：直接返回已有的Promise
      function getUserDetailsCorrect(userId) {
      return fetchDataWithPromise(`/api/users/${userId}`);
      }
    • 例外：当需要将非 Promise 的异步 API（如某些旧库的回调风格API）转换为 Promise 时，使用 new Promise 是合适的。

  3. 统一错误处理：在 Promise 链的末尾添加一个 .catch() 来捕获所有未处理的拒绝。在 async/await 中使用 try...catch。

  4. 扁平化 Promise 链：尽量避免在 .then() 内部嵌套过多的 .then()，而是通过返回 Promise 来保持链的扁平。

  5. 理解 Promise.resolve() 和 Promise.reject()：

    • Promise.resolve(value)：返回一个以给定值解析后的 Promise 对象。如果 value 本身是 Promise，则直接返回该 Promise；如果 value 是 thenable 对象（具有 .then 方法的对象），则 Promise.resolve 会尝试将其展开；否则返回一个以 value Fulfilled 的新 Promise。
    • Promise.reject(reason)：返回一个带有指定原因的 Rejected状态的 Promise 对象。

    “`javascript
    const pResolved = Promise.resolve(“立即成功”);
    pResolved.then(val => console.log(val)); // 立即成功

    const pRejected = Promise.reject(new Error(“立即失败”));
    pRejected.catch(err => console.error(err.message)); // 立即失败
    “`
    这两个方法在需要手动创建已确定状态的 Promise 时非常有用，例如在条件分支中或测试时。

  6. Promise 不可取消：标准的 Promise A+ 规范中，Promise 一旦创建就无法从外部取消。如果需要取消异步操作（如一个长时间运行的 AJAX 请求），通常需要借助 AbortController (用于 fetch API) 或其他特定库提供的取消机制，并在 Promise 的 executor 函数中监听取消信号。

六、总结

JavaScript Promise 及其 async/await 语法糖的出现，极大地革新了 JavaScript 的异步编程范式。它们通过提供结构化、可组合的方式来处理异步操作，有效地解决了回调地狱带来的代码可读性和维护性问题。

  • Promise 通过链式调用 .then(), .catch(), .finally() 将异步流程扁平化，使逻辑更清晰。
  • 静态方法如 Promise.all(), Promise.race(), Promise.allSettled(), Promise.any() 提供了强大的并发控制和组合能力。
  • async/await 则以近乎同步的语法进一步简化了异步代码的编写和理解，使得复杂的异步逻辑也能保持优雅和直观。

精通 Promise 不仅仅是掌握其 API，更重要的是理解其核心思想：将异步操作视为一个未来会产生结果的对象，并通过一套统一的规则来处理这些结果和可能发生的错误。在实际项目中，熟练运用 Promise 及其相关特性，能够编写出更健壮、更易于维护的异步 JavaScript 代码，从而提升开发效率和代码质量。随着 JavaScript 生态的不断发展，Promise 已经成为现代前端和 Node.js 开发中不可或缺的基础。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部