JavaScript异步函数教程：asyncawait用法详解

今天golang学习网给大家带来了《JavaScript异步函数详解：async和await用法教程》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

async函数需搭配await才能体现价值，因await可暂停执行等待Promise解决，实现类似同步的异步控制流；单独使用仅自动包装返回值为Promise，无法处理异步等待。

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异步函数教程：asyncawait用法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。