避免常见陷阱，写出更简洁高效的JavaScript代码

「如果你在使用 _await_ 时遇到过"undefined is not a function"的错误提示，别担心——你并不孤单。」 Async/Await功能强大，但也是现代JavaScript中最容易被误解的特性之一。

即使是经验丰富的开发者也会陷入一些微妙陷阱，导致未处理的Promise、静默失败或混乱的调用堆栈。让我们深入剖析，帮你真正掌握这项技术。

🤯 工程师们普遍面临的问题

Async/await看起来简单易懂，但很多工程师：

• 不知道await只能在async函数中使用
• 忘记用try/catch处理错误
• 在循环中使用await导致性能下降
• 混淆await和then()的用法

听起来耳熟吗？别担心——这些问题都有解决方案。

🧠 解决方案1：确保在Async函数中使用await

最常见的错误就是在非async上下文中使用await。

// ❌ 错误示范
const data = await fetchData(); // 会报SyntaxError

// ✅ 正确做法
async function loadData() {
  const data = await fetchData();
}

👉 黄金法则：使用await时，必须将其包裹在async函数中。

🛡️ 解决方案2：使用try/catch处理错误

await可能会像throw语句一样抛出错误，绝不能忽视错误处理。

// ❌ 这种写法可能导致静默失败
const res = await fetch("/api/data");

// ✅ 正确做法
try {
  const res = await fetch("/api/data");
  const data = await res.json();
} catch (error) {
  console.error("请求出错：", error);
}

👉 进阶技巧：可以创建一个错误处理包装器来优雅地处理错误。

🚀 解决方案3：避免在循环中使用await

在循环中使用await会导致顺序执行，大幅降低性能。

// ❌ 低效循环
for (let id of userIds) {
  const user = await fetchUser(id); // 每次都要等待
}

// ✅ 优化方案：并行执行
const users = await Promise.all(userIds.map(id => fetchUser(id)));

👉 性能贴士：尽可能使用Promise.all()实现并行操作。

🔄 解决方案4：不要混用then()和await

混合使用两种模式会导致代码混乱和可读性问题。

// ❌ 避免这种混合写法
const data = await fetchData().then(res => res.json());

// ✅ 保持风格统一
const res = await fetchData();
const data = await res.json();

👉 坚持使用async/await能让代码更清晰，调试更轻松。

📌 核心要点总结

✅ await只能在async函数中使用
✅ 用try/catch包裹await调用
✅ 避免在循环中使用await——改用Promise.all()
✅ 不要无谓地混用await和.then()

✨ 想让你的文章也像这篇一样火爆吗？

这篇文章之所以能成为Medium热门文章，主要归功于以下要素：

✅ 吸睛标题

我们采用了一个引人点击、激发好奇的标题，直击开发者痛点。

✅ 强力开场

开篇就点出常见挫败感，立即抓住读者注意力。

✅ 简洁排版

• 短小精悍的段落
• 代码片段展示
• 重点内容加粗

✅ 实用建议

提供真实案例和即学即用的解决方案。

✅ SEO优化标签

JavaScript、Async/Await、编程、Web开发、软件工程

✅ 促进互动的CTA

「💬 这篇文章帮你更好地理解async/await了吗？欢迎留言分享你的心得！」

原文链接：https://medium.com/devinsight/why-90-of-engineers-struggle-with-async-await-and-how-to-fix-it-6f3fa5cb8ca5
作者：Dipak Ahirav