javascript中的异步编程有哪些方式_async/await是如何简化它的

紅蓮之龍 2025-12-24 00:00:00 次阅读

JavaScript异步编程有回调函数、Promise、async/await三种方式：回调易致“回调地狱”；Promise通过链式调用和统一错误处理改善；async/await是基于Promise的语法糖，使异步代码更直观易维护。

JavaScript 中的异步编程主要靠回调函数、Promise、async/await 三种方式实现，其中 async/await 是基于 Promise 的语法糖，它让异步代码写起来像同步代码一样直观，大幅降低理解与维护成本。

回调函数：最原始但容易陷入“回调地狱”

早期用回调函数处理异步操作，比如 setTimeout 或 fs.readFile。问题在于多层嵌套时逻辑混乱、错误处理分散、难以复用。

多个异步操作串行执行时，回调层层嵌套，缩进越来越深
每个回调都要单独处理错误，无法统一捕获
想并行执行几个异步任务，得手动管理状态和完成信号

Promise：用链式调用解决嵌套，支持统一错误处理

Promise 把异步操作封装成一个对象，有 pending、fulfilled、rejected 三种状态。通过 .then() 和 .catch() 实现链式调用。

fetch('/api/user').then(res => res.json()).then(data => console.log(data))
多个 Promise 可用 Promise.all([p1, p2]) 并行执行
错误可集中用 .catch() 捕获，避免每个 then 都写错误处理

async/await：让异步代码看起来像同步，更易读易调试

async 函数自动返回 Promise，await 只能在 async 函数中使用，它会暂停函数执行，等待 Promise 解析后继续——但不阻塞主线程。

把 .then() 链变成直来直去的语句，比如 const data = await fetch('/api/user').then(r => r.json())
可以用标准的 try/catch 捕获异步错误，和同步代码完全一致
支持 for await...of 遍历异步迭代器，也支持 await 在条件或循环中灵活使用

它们的关系不是替代，而是演进与补充

async/await 并没有取代 Promise，它底层仍依赖 Promise。你依然需要理解 Promise 的状态、静态方法（如 all、race）、以及如何手写 Promise。只是在日常开发中，async/await 让组织逻辑变得更自然。

比如封装一个带重试的请求函数，用 async/await 写就清晰得多：

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i     try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return await res.json();
    } catch (err) {
      if (i === retries) throw err;
    }
  }
}

基本上就这些。async/await 不复杂，但容易忽略它对 Promise 的依赖和执行上下文限制——比如不能在普通函数或顶层直接用 await（ES2025 起支持顶层 await，但需注意环境兼容性）。