JS异步编程演进_Callback到Async/Await-js教程-PHP中文网

JS异步编程演进_Callback到Async/Await

夜晨

发布： 2025-11-19 20:00:01

原创

670人浏览过

从Callback到Async/Await，JavaScript异步编程逐步解决回调地狱问题：Callback导致嵌套过深、维护困难；Promise通过链式调用和统一错误处理改善可读性；Generator以同步语法书写异步逻辑但需额外驱动；Async/Await作为最终方案，结合Promise优势，支持try/catch和同步结构，代码更简洁清晰，成为现代开发标准。

js异步编程演进_callback到async/await

JavaScript异步编程的发展，本质上是为了解决回调地狱（Callback Hell）带来的代码可读性差、维护困难等问题。从最初的 Callback 到 Promise，再到 Generator 和最终的 Async/Await，每一次演进都让异步代码更清晰、更接近同步写法。

Callback：最初的异步处理方式

在早期 JavaScript 中，所有异步操作都依赖回调函数。比如使用 setTimeout 或发起一个 AJAX 请求：

setTimeout(() => {
console.log("3秒后执行");
}, 3000);

当多个异步任务需要串行执行时，就容易出现层层嵌套：

getData((err, data) => {
  if (err) return console.error(err);
  getMoreData(data, (err, moreData) => {
    if (err) return console.error(err);
    getEvenMoreData(moreData, (err, result) => {
      console.log(result);
    });
  });
});

这种结构难以阅读和调试，错误处理重复，逻辑分散。

Promise：解决嵌套问题的第一步

ES6 引入了 Promise，将回调函数的嵌套改为链式调用：

getData()
  .then(data => getMoreData(data))
  .then(moreData => getEvenMoreData(moreData))
  .then(result => console.log(result))
  .catch(err => console.error(err));

Promise 的优势在于：

通过 .then() 实现链式调用，避免深层嵌套
统一使用 .catch() 处理错误，减少重复判断
支持并发控制，如 Promise.all() 等方法

但 Promise 仍存在“链过长”问题，且代码看起来仍是“非同步”风格。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

264

查看详情

Generator 函数：用同步语法写异步代码

Generator 允许函数暂停执行，配合 Promise 可以实现更优雅的流程控制：

function* asyncFlow() {
  try {
    const data = yield getData();
    const moreData = yield getMoreData(data);
    const result = yield getEvenMoreData(moreData);
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

虽然写法像同步代码，但需要手动驱动执行（如使用 co 库），使用成本高，普及受限。

Async/Await：现代异步编程的标准

ES2017 推出的 async/await 是基于 Promise 和 Generator 的语法糖，彻底让异步代码看起来像同步代码：

async function fetchData() {
  try {
    const data = await getData();
    const moreData = await getMoreData(data);
    const result = await getEvenMoreData(moreData);
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

async/await 的优点包括：