当前位置：首页 > news >正文

JavaScript 异步编程终极语法（async/await ）

news 2026/5/16 20:50:10

JavaScript 异步编程终极语法：async/await 完全指南，基于 Promise，用同步写法写异步代码，是目前前端 / Node.js 主流标准。

一、async/await 是什么？

async/await 是ES2017 引入的语法糖，底层 100% 基于 Promise。它让异步代码写法和阅读都像同步代码，但底层依然是非阻塞的。

据 2023 State of JS 调查，超过90% 开发者在使用 async/await。

// 像同步一样优雅的异步代码 async function getUserData(userId) { const response = await fetch(`/api/users/${userId}`) const user = await response.json() return user }

二、本文你将学到

async/await 本质（就是 Promise）
async 关键字：把函数变成返回 Promise 的函数
await：暂停执行但不阻塞主线程
try/catch 做异步错误处理（最舒服的方式）
串行 vs 并行执行（性能关键）
最常见 5 个坑与避坑
async/await 与事件循环、微任务的关系

前置知识：Promise、事件循环

三、三种异步写法对比

1. 回调（老办法，嵌套地狱）

function getUserPosts(userId, callback) { fetchUser(userId, (err, user) => { if (err) return callback(err) fetchPosts(user.id, (err, posts) => { if (err) return callback(err) fetchComments(posts[0].id, (err, comments) => { callback(null, { user, posts, comments }) }) }) }) }

2. Promise 链式（好一点，但仍有嵌套）

function getUserPosts(userId) { return fetchUser(userId) .then(user => fetchPosts(user.id) .then(posts => fetchComments(posts[0].id) .then(comments => ({ user, posts, comments })) ) ) }

3. async/await（现代最清晰）

async function getUserPosts(userId) { const user = await fetchUser(userId) const posts = await fetchPosts(user.id) const comments = await fetchComments(posts[0].id) return { user, posts, comments } }

四、餐厅类比（秒懂）

不用 async/await：站在柜台等餐，阻塞后面的人
用 async/await：坐下点单，厨房做菜（异步），你可以玩手机（不阻塞）
做好了服务员端来（Promise 决议），你继续吃（函数恢复执行）

核心：await 看起来在等，实际上 JS 主线程完全空闲。

五、async 关键字

作用只有一个：让函数返回 Promise。

// 普通函数 function greet() { return 'Hello' } greet() // "Hello" // async 函数 async function greetAsync() { return 'Hello' } greetAsync() // Promise { <fulfilled>: "Hello" }

规则

return 普通值 → 自动包装Promise.resolve(值)
throw 错误 → 自动变成Promise.reject(错误)
return Promise → 不会重复包装

支持所有函数形式

普通函数
函数表达式
箭头函数
对象方法
类方法

六、await 关键字

作用：暂停 async 函数，直到 Promise 落定，然后返回结果。

只能在两个地方用 await

async 函数内部
ES 模块顶层（top-level await）

可以 await 什么？

任何 Promise（最常用）
thenable 对象
普通值（会立刻继续，但仍进入微任务）

关键特性：await 暂停函数，不暂停线程

async function test() { console.log(1) await delay(1000) console.log(2) } console.log('A') test() console.log('B') // 输出顺序：A → 1 → B → 2

底层原理

await 会把后面的代码变成微任务，等 Promise 决议后再执行。等价于：

async example() → 等价于 → example().then(...)

七、错误处理：try/catch/finally

async/await 最爽的地方：用同步的 try/catch 处理异步错误。

async function fetchUserData(userId) { try { const res = await fetch(`/api/users/${userId}`) if (!res.ok) throw new Error('HTTP 错误') return await res.json() } catch (err) { console.error('失败：', err.message) throw err // 继续向上抛 } finally { // 无论成功失败都执行 hideLoading() } }

常见陷阱

catch 后不 rethrow → 错误被 “吃掉”，函数返回 undefined。

八、串行 vs 并行（性能分水岭）

1. 串行（慢）

每个请求等上一个完成。

// 总耗时 ≈ 三个请求时间相加 const user = await fetchUser(userId) const posts = await fetchPosts(userId) const notes = await fetchNotes(userId)

2. 并行（快，推荐）

所有请求同时发送，用Promise.all。

// 总耗时 ≈ 最慢那个请求 const [user, posts, notes] = await Promise.all([ fetchUser(userId), fetchPosts(userId), fetchNotes(userId) ])

选择规则

串行：下一步依赖上一步结果
并行：互相独立，追求速度

九、Promise 组合方法（和 await 天生一对）

Promise.all：全部成功才成功，任一失败立即失败
Promise.allSettled：全部完成，不管成败
Promise.race：谁先完成谁赢（成功失败都算）
Promise.any：谁先成功谁赢
Promise.withResolvers：外部控制 resolve/reject
Promise.try：统一捕获同步 / 异步错误

十、最常见 5 个错误（必考）

1. 忘记写 await

拿到 Promise 对象，不是结果。

const res = fetch('/api') // ❌ 是 Promise const data = await res.json() // ❌ 崩溃

2. forEach + await 无效

forEach 不会等待异步函数。✅ 替换为for...of或Promise.all

3. 无脑串行，本该并行

慢 2～10 倍。

4. 没有错误处理

未捕获的 Promise 拒绝会崩溃应用。

5. try 里 return 但没 await

错误抓不到！

// ❌ 错 try { return fetch(...) } catch {}

// ✅ 对 try { return await fetch(...) } catch {}

十一、Top-level await（ES 模块）

在模块最外层直接使用 await，无需 async 函数。

// config.js const config = await fetch('/config.json').then(r => r.json()) export default config

适用场景：

加载配置
动态导入
数据库连接初始化
特性检测

十二、高级模式

1. 指数退避重试

async function fetchWithRetry(url, retries = 3) { for (let i = 0; i < retries; i++) { try { return await fetch(url) } catch (e) { if (i === retries - 1) throw e await delay(1000 * 2 ** i) } } }

2. 超时控制

async function withTimeout(promise, ms) { return Promise.race([ promise, new Promise((_, reject) => setTimeout(() => reject(new Error('超时')), ms) ) ]) }