如何在异步函数中正确链式调用请求-js教程-PHP中文网

在 async 函数中链式执行 HTTP 请求时，await request1(); await request2(); 是最清晰、可靠的方式；而 await request1().then(() => request2()) 存在隐性陷阱——它实际等待的是 request1().then(...) 这个新 Promise，但未正确传递 request2() 的执行结果，可能导致逻辑错误或异常丢失。

在 `async` 函数中链式执行 http 请求时，`await request1(); await request2();` 是最清晰、可靠的方式；而 `await request1().then(() => request2())` 存在隐性陷阱——它实际等待的是 `request1().then(...)` 这个新 promise，但未正确传递 `request2()` 的执行结果，可能导致逻辑错误或异常丢失。

在现代 JavaScript 异步编程中，有两种主流方式实现请求的串行执行：await 顺序调用 和 .then() 链式调用。二者语义目标一致（确保 request2 在 request1 成功完成后才发起），但实现机制与错误处理能力有本质差异。

✅ 推荐方式：使用 await 顺序执行

const someFunc = async () => {
  try {
    const data1 = await request1(); // 等待 request1 完成并获取返回值
    const data2 = await request2(); // 确保 request2 在 request1 后执行
    return { data1, data2 };
  } catch (error) {
    console.error("请求链失败：", error);
    throw error;
  }
};

✅ 优势：

代码线性可读，符合同步直觉；
每个 await 都会捕获对应 Promise 的 rejection，try/catch 可统一处理整个链路错误；
自动传播 request2() 的返回值，便于后续使用。

⚠️ 警惕误区：混用 await 与 .then() 的危险写法

// ❌ 错误示例：看似等效，实则隐患重重
const someFunc = async () => {
  await request1().then(() => request2()); // 问题在此！
};

⚠️ 问题分析：

request1().then(() => request2()) 返回的是一个 新的 Promise，其状态取决于 request2() 的执行结果；
但 await 只等待该 Promise 的完成，并不会自动 await request2() 内部的 Promise（若 request2() 返回 Promise，.then() 回调中未 return 它，则外层 Promise 会立即 resolve，导致 request2 实际被“放行”为微任务，失去严格串行保证）；
更严重的是：若 request2() 抛出错误，该错误将无法被外层 async 函数的 try/catch 捕获，因为错误发生在 .then() 的回调中，且未被 return 或 await 显式链接。

✅ 正确的 .then() 链式写法（不推荐在 async 函数内混用）：

// ✅ 纯 Promise 风格（无需 async）
const someFunc = () => {
  return request1()
    .then((data1) => request2()) // 必须 return request2()，形成链
    .then((data2) => ({ data1, data2 }))
    .catch(console.error);
};