17370845950

本文介绍如何通过合理使用 async/await 替代 .then() 链式

在现代 JavaScript 开发中，async/await 已成为处理异步逻辑的首选方式——它让异步代码看起来像同步代码，显著降低嵌套和回调带来的认知负担。相比传统的 .then().catch() 链式写法，await 能自然地将“等待结果”语义显式表达出来，使数据流一目了然。

你当前的写法存在两个典型问题：

• apiCall() 声明为 async 却在外部仍用 .then() 消费，未充分发挥 await 优势；
• 后续 fetchData() 中 console.log(fetchData()) 实际输出的是一个 Promise 对象（因为 fetchData 是 async 函数），而非预期的数据，这会导致调试困惑。

✅ 正确且更清晰的重构方式如下：

// 封装底层请求：明确返回业务数据（data），隐藏 axios 响应结构
const apiCall = async () => {
  const { data } = await axios.get("https://api.example.com/data");
  return data; // 直接返回解构后的 data，调用方无需再 .data
};

// 业务层逻辑：专注数据消费，代码线性、易读
const fetchData = async () => {
  try {
    const result = await apiCall(); // 等待数据就绪
    console.log(result); // 直接拿到业务数据
    return result;
  } catch (error) {
    console.error("API 请求失败：", error.message);
    throw error; // 可选择重新抛出，便于上层统一错误处理
  }
};

// 正确调用方式（必须在 async 上下文中）
(async () => {
  try {
    const data = await fetchData();
    // ✅ 此处 data 即为实际响应体，非 Promise
  } catch (err) {
    // 处理 fetchData 抛出的错误
  }
})();

? 关键要点总结：

• 避免混合风格：不要在一个 async 函数内部用 .then()，也不要在顶层直接 console.log(asyncFn())；始终用 await 消费 async 函数返回值；
• 分层职责清晰：apiCall 负责网络请求与响应标准化（如解构 data），fetchData 负责业务逻辑编排；
• 务必处理异常：await 后的 Promise 拒绝会抛出错误，需用 try/catch 包裹，否则会引发未捕获异常；
• 若需在非 async 环境（如事件处理器）中调用，可保留 .then()，但建议整个调用链统一风格，优先采用 async/await。

遵循以上模式，你的异步代码将更健壮、更易测试、也更容易被团队成员理解。