在 JavaScript 的异步世界里async/await 逐渐成为开发者们青睐的新工具。它让异步代码kan起来geng像同步代码，降低了学习曲线，也提升了代码的可读性和可维护性。本文将深入探讨 async/await 的工作原理，揭示其背后的机制，并分析其优缺点以及一些常见 pitfalls。

async/await 踩坑 . 平行await vs 继发await

理解async/await的关键在于理解其执行方式。默认情况下await 会导致当前任务暂停，直到 awaited Promise 完成。这会导致代码执行是顺序的，也就是继发执行。

// 继发：每个 await 等待上一个完成const a = await fetchA; // 等待 1sconst b = await fetchB; // 等待 1sconst c = await fetchC; // 等待 1s// 总耗时：3s// 并发：Promise.all 同时发起const = await Promise.all, fetchB, fetchC]);// 总耗时：1s

然而我们Ke以通过使用 `Promise.all` 来实现并发执行。Promise.all 会同时启动多个异步任务，并在所有任务完成后一起返回结果。这种方式Ke以显著提高程序的性Neng。

. await 在 forEach 中陷阱

// 错误写法.forEach => { await fetch; // forEach 不会等待 async 回调}); // 正确写法：使用 for...offor { await fetch;}

在循环中使用 `await` 时需要特别小心。Ru果直接在 `forEach` 或其他循环中使用 `async` 函数，循环体中的函数不会等待 Promise 完成。 这会导致程序阻塞，无法继续执行后续迭代。

. async 回调函数

// 错误arr.map => { return await fetch;}); // 返回的是 Promise，不是数据 // 正确const results = await Promise.all));

`async` 函数本身返回一个 Promise 对象。即使你使用 `map` 或其他迭代器来处理异步操作的结果，你也需要将这些结果收集到一个 Promise 对象中才Neng进行后续操作。

参考 ES6中的Iterator迭代器

async function main {  try {    const res = await fetch;      const data = await res.json;       console.log;     } catch  {       console.error;     }  }

async function fetchData { const data1 = yield fetch; const data2 = yield fetch; return data2;}// async/await 版本async function fetchData { const data1 = await fetch; const data2 = await fetch; return data2;}

错误处理

//原始代码 async function main { const res = await syncTime; console.log;} //编译后function main { return _asyncToGenerator { const res = yield syncTime; console.log; });}

等待中 → Promise resolve → 继续执行 → 等待中 → ...

---