JS异步四兄弟：9招让嵌套代码直降一半！

各位玩家朋友，大家好，我是King。
今天咱们聊一个让很多刚入门的朋友头疼的问题——异步回调嵌套太深，代码看着像楼梯一样，改一个地方要动半天。别慌，异步四兄弟（回调、Promise、Generator、async/await）就是来帮你的。下面这9个重构关键点，是我自己踩坑后总结出来的，照着改，你的代码嵌套能直接少一半。
关键点1：把回调函数“拉平”  
回调一层套一层，最直观的就是改成Promise。

// 重构前
function getData(callback) {
  setTimeout(() => {
    callback('用户数据');
  }, 1000);
}

getData((data) => {
  console.log(data);
});

// 重构后
function getData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('用户数据'), 1000);
  });
}

getData().then(console.log);

关键点2：用Promise链代替多层嵌套
多个异步任务一个接一个，不要写金字塔。  www.687game.com.cn  https://www.687game.com.cn/hjhy/120.html  https://www.687game.com.cn/hyfl/121.html  

// 重构前
step1(() => {
  step2(() => {
    step3(() => {});
  });
});

// 重构后
step1()
  .then(() => step2())
  .then(() => step3());

关键点3：用async/await彻底消灭.then嵌套
.then连写多了也乱，直接用async/await更直白。

// 重构前
getUser()
  .then(user => getOrder(user.id))
  .then(order => console.log(order));

// 重构后
async function showOrder() {
  const user = await getUser();
  const order = await getOrder(user.id);
  console.log(order);
}

关键点4：Promise.all处理并行任务    https://www.kkkmir.com/bbdq/350.html   https://www.sofuba.com/dzycq/350.html  https://www.haomir.com.cn/yxgl/350.html  https://www.644game.com.cn/hjcq/352.html  
几个互不依赖的任务，别一个个等，一起跑更快。

// 重构前（串行，慢）
const a = await fetchA();
const b = await fetchB();

// 重构后（并行，快）
const [a, b] = await Promise.all([fetchA(), fetchB()]);

关键点5：Promise.race设置超时或竞速   https://www.887game.com.cn/yxgl/353.html  https://www.08game.com.cn/dzycq/359.html  https://www.34game.com.cn/hlbb/368.html  
谁先回来用谁的，适合超时控制。  https://www.48game.com.cn/hjcq/356.html  https://www.7sfwang.cn/fgcq/310.html  https://www.35game.com.cn/180hjcq/316.html  

const result = await Promise.race([
  fetchData(),
  timeout(3000)
]);

关键点6：用Generator管理更复杂的状态流
遇到需要暂停、恢复、传递值的场景，Generator比手写状态机干净。   

function* taskFlow() {
  const a = yield fetchA();
  const b = yield fetchB(a);
  return b;
}

关键点7：把重复的错误处理抽出去
每个异步都写catch会重复，用一个统一错误处理。

async function safeRun(fn) {
  try {
    return await fn();
  } catch (err) {
    console.error('统一兜底：', err);
  }
}

关键点8：用队列控制并发数量
同时发几十个请求容易被限流，用p-limit这类思路控制。  https://www.kfzhan.com/kfxx/376.html   www.kfzhan.com  

// 概念示例
async function batchRun(tasks, limit) {
  const results = [];
  for (let i = 0; i < tasks.length; i += limit) {
    const batch = tasks.slice(i, i + limit);
    results.push(...await Promise.all(batch.map(t => t())));
  }
  return results;
}

关键点9：把长异步流程拆成独立小函数
不要把一整个大流程写在一个函数里，拆开才好维护。

async function main() {
  const user = await getUser();
  const cart = await getCart(user.id);
  const total = await calcTotal(cart);
  await submitOrder(total);
}

新手常见问题与辩解
问题1：我用回调函数也跑得挺好，为什么非要用Promise或async/await？
辩解：回调能跑，但一旦业务复杂，回调嵌套超过三层，你试试改中间一个参数——牵一发而动全身，调试时定位错误也很痛苦。Promise和async/await并不是“炫技”，而是让你的代码像同步一样线性书写，减少心智负担。而且主流库和API（比如fetch、fs.promises）都已经基于Promise，硬要用回调反而要多写包装代码。
问题2：await后面一定要接Promise吗？我接普通值会报错吗？  https://www.38game.com.cn/bbdq/314.html   https://www.330hf.com/chaobian/1995.html  
辩解：不会报错，await后面如果不是Promise，它会自动转成立即resolve的Promise。比如await 123完全合法，结果是123。但实际开发中我们一般await异步操作，如果确定是普通值，其实不需要await。这个特性在一些封装场景下有用（比如统一处理可能同步或异步的返回值）。
希望这9个点能帮你快速减少代码嵌套。异步四兄弟各有各的用法，不用追求“全用最新的”，但建议优先选Promise + async/await组合，这是目前最舒服的写法。有问题随时留言，我是King，咱们下回见。

更多经验分享链接：

把Codex技能变MCP服务，分享你的专属工具！ - 九世師 - 博客园

Vxe Gantt 高级技巧：动态调整任务顺序！ - 九世師 - 博客园

Web Storage避坑：localStorage.getItem常见错误与正确用法！ - 九世師 - 博客园

关网页也不丢数据！sendBeacon埋点可靠方案！ - 九世師 - 博客园