JavaScript异步函数详解：async与await使用教程

本文深入剖析了JavaScript中async/await的核心机制与实战要点，揭示async函数本质是自动返回Promise的普通函数，其真正价值在于与await协同实现清晰、可控的异步流程控制；文章不仅厘清了await必须位于async函数内、自动处理非Promise值、暂停执行但不阻塞主线程等关键特性，还重点解析了错误捕获的最佳实践（推荐try/catch而非链式.catch）、串行与并行异步操作的正确写法（如Promise.all与allSettled的取舍），并直击开发者常忽视的底层真相——async/await只是优雅的语法糖，不改变事件循环本质，滥用可能导致性能瓶颈和逻辑陷阱，帮助读者跳出“伪同步”误区，写出高效健壮的异步代码。

JavaScript 异步函数不是一种新类型函数，而是用 async 关键字声明的普通函数，它自动返回 Promise，并允许在函数体内用 await 暂停执行、等待 Promise 解决。

为什么 async 函数必须搭配 await 才体现价值？

单独写 async function foo() { return 42; } 等价于 function foo() { return Promise.resolve(42); } —— 它只是让返回值自动包装成 Promise，没解决“等待异步操作”的问题。真正改变控制流的是 await，但它只能用在 async 函数内部。

• await 只能出现在 async 函数中，否则报错 SyntaxError: await is only valid in async functions
• await 后面如果不是 Promise，会自动转成 Promise.resolve(value)，所以 await 123 是合法的，但没实际意义
• 遇到 await 时，JS 引擎会暂停当前函数执行（不阻塞主线程），等 Promise settled 后继续，这比手动写 .then() 更接近同步写法

await 遇到 rejected Promise 怎么办？

直接 await 一个被 reject 的 Promise 会抛出错误，就像同步代码里 throw 一样，必须捕获，否则会变成未处理的 Promise rejection。

• 用 try/catch 捕获最直接：

  async function fetchUser() {
    try {
      const res = await fetch('/api/user');
      const user = await res.json();
      return user;
    } catch (err) {
      console.error('请求失败：', err);
      throw err; // 或返回默认值
    }
  }

• 不写 try/catch 时，错误会冒泡到调用链上层，最终可能触发 unhandledrejection 事件
• 避免用 .catch() 链在 await 表达式后面（比如 await promise.catch(...)），语义混乱且容易漏掉其他错误

多个异步操作是串行还是并行？怎么控制？

await 天然是串行的：前一个没结束，后一个不会开始。但很多场景需要并行（比如同时请求多个接口），这时不能连写 await，而要先发起所有 Promise，再统一 await。

• 串行（耗时累加）：

  const a = await fetch('/a');
  const b = await fetch('/b'); // 等 a 完了才发 b

• 并行（耗时取最长）：

  const [a, b] = await Promise.all([
    fetch('/a'),
    fetch('/b')
  ]);

• 如果其中某个可能失败但不想影响整体，用 Promise.allSettled()；若只想等第一个完成，用 Promise.race()
• 注意 Promise.all() 在任意一个 reject 时就立即 reject，和 await 的错误传播机制叠加后容易误判源头

真正容易被忽略的点是：async/await 不改变事件循环本质，它只是语法糖。await 后的代码会被放入 microtask 队列，不是立刻执行；嵌套过深或在循环里滥用 await（尤其是没做并发控制）会导致性能骤降，甚至触发浏览器节流。别把它当成“让异步变同步”的银弹。

到这里，我们也就讲完了《JavaScript异步函数详解：async与await使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！