异步编程完全指南：从 Promise 到 await 与 Async 迭代器的 8 个演进知识点。

各位大佬好，我是 King。今天咱们来聊一个前端绕不开的话题——异步编程。很多人看到 Promise、async、await 这些词就头大，其实没那么玄乎。打个比方，你点外卖、等快递、烧开水，都是“异步”。你把事情交代出去，不用干等着，该干嘛干嘛，东西到了自然会通知你。www.kkkmir.com  https://www.haomir.com.cn/gblbb/344.html  https://www.sofuba.com/fgcq/344.html  
这篇文章我会用大白话，把这套机制的 8 个关键演进步骤拆开讲清楚。你不需要记住所有细节，但读完心里会有张清晰的地图。
知识点 1：回调函数 —— 最原始的“到了叫我”   
最早的异步写法就是回调。你把一个函数交给某个耗时任务，任务完成后调用这个函数。

function orderFood(callback) {
  setTimeout(() => {
    console.log("外卖到了");
    callback();
  }, 1000);
}

orderFood(() => {
  console.log("开门取餐");
});

问题在哪里？ 一旦多个异步任务有先后依赖，就会写出“回调地狱”：

orderFood(() => {
  cook(() => {
    clean(() => {
      watchTV();
    });
  });
});

代码向右无限嵌套，改起来像拆炸弹。这就是第一阶段的真实写照——能用，但很难受。

知识点 2：Promise —— 把“将来”包装成一个对象  https://www.644game.com.cn/xkcq/347.html    https://www.887game.com.cn/yxgl/349.html  
Promise 本质是一个承诺对象。它有三种状态：等待中、已完成、已拒绝。状态一旦改变就固定下来。

function orderFood() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let success = true;
      if (success) {
        resolve("炸鸡到了");
      } else {
        reject("商家打烊了");
      }
    }, 1000);
  });
}

orderFood()
  .then(result => console.log(result))
  .catch(error => console.log(error));

你可以把 .then() 当作“成功了做什么”，.catch() 当作“出错了怎么办”。Promise 最大的贡献是把嵌套拍扁成链式调用。

知识点 3：Promise 链式调用 —— 让多个任务排好队
前面回调地狱的例子，用 Promise 重写会清晰很多：

orderFood()
  .then(() => cook())
  .then(() => clean())
  .then(() => watchTV())
  .catch(error => console.log("哪里断了:", error));

每个 .then() 都可以返回一个新的 Promise，这样下一步会等上一步彻底完成再执行。调试时一眼就能看出顺序。
知识点 4：Promise 静态方法 —— 同时处理多个任务  https://www.08game.com.cn/hdgl/354.html    https://www.34game.com.cn/hlbb/363.html  https://www.48game.com.cn/xkcq/351.html
有时候你不关心顺序，只想知道好几个任务什么时候全做完，或者有一个完成就行。
Promise.all()：全部成功才算成功，一个失败就整体失败。
Promise.allSettled()：等所有任务尘埃落定，不管成功还是失败，返回每个的结果。
Promise.race()：谁先完成就听谁的。
Promise.any()：只要有一个成功就返回它。

let takeout = orderFood();
let laundry = washClothes();
let cleanRoom = sweepFloor();

Promise.all([takeout, laundry, cleanRoom])
  .then(results => console.log("三件事都搞定了"))
  .catch(err => console.log("有一样出问题了"));

知识点 5：async/await —— 终于可以像写同步代码一样写异步
这是异步编程体验的一次大跨越。async 标记一个函数，await 等待一个 Promise 完成。

async function myDay() {
  try {
    let food = await orderFood();
    console.log(food);
    await cook();
    await clean();
    await watchTV();
  } catch (error) {
    console.log("中途出了问题:", error);
  }
}

注意：await 只能在 async 函数里用。错误处理用 try/catch 就行，和同步代码几乎没有区别。这也是目前日常开发中最推荐的方式。
知识点 6：错误处理的不同姿势
不同异步写法，抓错误的方式不一样：  
回调：在回调函数里手动判断 error 参数。https://www.7sfwang.cn/fgcq/305.html   https://www.35game.com.cn/180hjcq/311.html  https://www.38game.com.cn/wjcq/309.html  
Promise：用 .catch() 或在 then 的第二个参数里处理。
async/await：用 try/catch 包裹 await 语句。
一个常见“坑”：忘记在 async 函数里做 try/catch，导致错误静默消失。务必养成习惯，该抓的异常一定要抓。
知识点 7：异步迭代器 —— 处理“一点一点来的数据”
有些数据不是一次性给完的，比如分页请求、流式数据、用户输入事件。这时可以用异步迭代器。
异步迭代器是一个对象，它有一个 next() 方法，返回的是 Promise，这个 Promise 解析后的值像 { value, done } 这样。
配合 for await...of 语法，可以优雅地消费这种数据源：

async function processPages() {
  let pageLoader = getAsyncPageLoader(); // 假设这是一个异步迭代器
  for await (let page of pageLoader) {
    console.log("拿到一页数据:", page);
    // 每次循环会等上一页的 Promise 完成再继续
  }
}

这比用 while 手动调用 next() 要清爽太多了。
知识点 8：从回调到异步迭代器的完整演进总结
我们可以把 8 个点串成一条时间线：
回调函数 —— 基础但容易写出深度嵌套。
Promise —— 把异步结果包装成对象，支持链式。
链式调用 —— 拍平嵌套，可读性提升。  
静态方法 —— 批量管理多个异步任务。https://www.21qj.com/gongzuozongjie/1114.html   https://www.330hf.com/weibian/1992.html  https://www.338wow.com/soufu/2714.html  
async/await —— 写法最接近同步逻辑，日常首选。
错误处理 —— 不同方式有不同写法，容易遗漏。
异步迭代器 —— 应对分页、流式、事件类场景。
组合使用 —— 实际项目中经常混用，比如用 async/await 配合 for await...of 遍历异步数据。
没有哪种写法是“万能”的。简单场景用 async/await 最顺手；多个并行任务用 Promise.all；流式数据上异步迭代器。根据场景选工具，而不是一套模板走到底。
写在最后
异步编程听起来唬人，其实核心就一句话：别死等，把后续要做的事情提前写好，事情完成了自然有人叫你。Promise 解决了回调的嵌套噩梦，async/await 让代码像讲故事一样流畅，异步迭代器又给流式数据开了一扇窗。
把这 8 个知识点搞明白，你再看任何异步代码都不会发怵。如果某个点卡住了，就回来翻翻这篇文章，或者打开浏览器控制台亲手敲一遍——动手试错是最快的老师。
希望这篇文章能帮你在异步编程这条路上少绕弯子。我是 King，咱们下篇见。
本文首发于博客园，欢迎收藏、转发。转载需保留出处。

更多我的文章链接我放在下边了欢迎讨论学习：

仅用一个配置，Webpack 打包速度暴涨 1000%！ - 九世師 - 博客园 

JavaScript 高级特性完全指南：从 ES6 到 ES2025 的 10 个核心知识点！ - 九世師 - 博客园