JavaScript 中 async/await 怎么使用替代传统回调地狱-js教程-PHP中文网

async/await 是 javascript 中基于 promise 的异步编程现代写法，使异步代码线性可读、避免回调地狱，支持 try/catch 统一错误处理，并可通过 promise.all 实现并行请求。

javascript 中 async/await 怎么使用替代传统回调地狱

async/await 是 JavaScript 中处理异步操作的现代写法，它让异步代码看起来像同步代码一样清晰、线性，从而有效替代“回调地狱”（Callback Hell）。

什么是回调地狱？

当多个异步操作（如 fetch 请求、文件读取、定时器等）需要按顺序执行，且后一个依赖前一个结果时，用传统回调函数嵌套会导致代码层层缩进、难以阅读和维护：

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log(c);
    });
  });
});

这种结构不仅难调试，也难以加错误处理或中途取消。

用 async/await 改写：更直观、可读性强

async/await 建立在 Promise 基础上。只要函数返回 Promise，就能用 await 等待其完成；整个函数需用 async 声明：

async 函数自动返回 Promise，即使你 return 普通值，也会被包装成 resolved Promise
await 只能在 async 函数内部使用，它会暂停执行，直到 Promise settled（fulfilled 或 rejected）
await 后面可以是 Promise、任意值（非 Promise 会立即返回），但通常用于 Promise

上面的嵌套回调可改写为：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

async function getDataSequence() {
  try {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getEvenMoreData(b);
    console.log(c);
  } catch (error) {
    console.error("出错了：", error);
  }
}

错误处理比回调更自然

回调地狱中错误要每个层级单独判断 err 参数；而 async/await 可直接用 try/catch 捕获任何 await 行抛出的异常（包括 Promise.reject 和 throw）：

Promise.reject() 会被 catch 捕获
await 后面的 Promise 被 reject，等价于 throw 那个 reason
同步错误（比如解析 JSON 失败）也能被同一 try/catch 捕获

例如：

async function fetchUser() {
  try {
    const res = await fetch("/api/user");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json(); // 若 JSON 格式错误，这里 throw
    return data;
  } catch (err) {
    console.warn("获取用户失败：", err.message);
  }
}

并行请求：别忘了 Promise.all

await 默认是串行等待，但很多场景需要并发请求（比如同时拉取用户信息和订单列表）。这时不要写多个 await，而应配合 Promise.all：

先发起所有请求，得到 Promise 数组
再 await Promise.all([p1, p2, p3]) —— 等全部完成或任一失败
如果想“不管失败继续等其他”，可用 Promise.allSettled

示例：

async function loadDashboard() {
  const [user, posts, stats] = await Promise.all([
    fetch("/api/user").then(r => r.json()),
    fetch("/api/posts").then(r => r.json()),
    fetch("/api/stats").then(r => r.json())
  ]);
  render({ user, posts, stats });
}

不复杂但容易忽略：async/await 不是语法糖，它改变了执行模型，但底层仍是事件循环与微任务。理解这一点，才能更好把握执行时机和调试行为。