JavaScript 怎么通过 async 和 await 简化复杂的接口调用链-js教程-PHP中文网

async/await将promise链转为同步风格代码，提升可读性与错误控制：串行依赖用await依次调用，独立请求用promise.all并行，统一用try/catch捕获异常。

javascript 怎么通过 async 和 await 简化复杂的接口调用链

用 async 和 await 写接口调用链，核心是把嵌套的 Promise.then() 拉成“看起来像同步”的代码，逻辑更直、错误更好控、可读性明显提升。

把 Promise 链转成 await 序列

以前写多个依赖接口（比如先登录 → 拿 token → 查用户信息 → 加载权限）得层层嵌套 then，容易掉进“回调地狱”。用 await 就能一行行写下去：

每个 await 后面接一个返回 Promise 的函数（如 fetch、axios.get）
上一步结果直接赋给变量，下一步就能用，不用传参或写闭包
注意：await 只能在 async 函数里用

串行调用：按顺序等前一步完成再走下一步

适合有强依赖关系的场景，比如必须拿到用户 ID 才能查订单：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

async function loadUserAndOrders() {
  try {
    const userRes = await fetch('/api/login', { method: 'POST' });
    const user = await userRes.json();

    const orderRes = await fetch(`/api/orders?uid=${user.id}`);
    const orders = await orderRes.json();

    return { user, orders };
  } catch (err) {
    console.error('请求失败', err);
  }
}

并行调用：用 `Promise.all` + `await` 提升性能

如果几个接口彼此独立（比如同时拉 banner、新闻、推荐列表），就别傻等，一起发：

用 Promise.all([p1, p2, p3]) 包住所有 Promise
再 await 它，得到一个数组结果，顺序和传入一致
比串行快得多，尤其在网络延迟明显时

async function loadHomeData() {
  const [banner, news, rec] = await Promise.all([
    fetch('/api/banner').then(r => r.json()),
    fetch('/api/news').then(r => r.json()),
    fetch('/api/recommend').then(r => r.json())
  ]);
  return { banner, news, rec };
}