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

前端笔记之 async/await 异步编程详解

news 2025/7/19 10:31:02

async/await 是现代 JavaScript 中处理异步操作的革命性特性，
它基于 Promise 构建，让异步代码拥有同步代码的可读性和简洁性。

async/await 异步编程详解

核心概念
- 1. async 函数
- 2. await 表达式
执行机制详解
- 1. 事件循环中的 await
- 2. 错误处理机制
高级用法与模式
- 1. 并行执行优化
- 2. 异步迭代
- 3. 顶级 await（ES2022）
性能优化技巧
- 1. 避免 await 陷阱
- 2. 并发控制
与常见异步模式对比
最佳实践
- 1. 始终处理错误
- 2. 合理使用 Promise 方法
- 3. 避免阻塞事件循环
常见陷阱与解决方案
Node.js 特定应用
总结
在 Node.js 中使用 async/await 的最佳实践：

核心概念

1. async 函数

声明一个异步函数，自动返回 Promise 对象
函数内部可以使用 await 关键字
语法：async function functionName() { … }

async function fetchData() {return "Data fetched";
}// 等同于
function fetchData() {return Promise.resolve("Data fetched");
}

2. await 表达式

只能在 async 函数内部使用
暂停 async 函数执行，等待 Promise 解决
返回 Promise 的解决值
语法：const result = await promise;

async function getUser() {const response = await fetch('/api/user'); // 等待fetch完成const user = await response.json();        // 等待JSON解析return user;
}

执行机制详解

1. 事件循环中的 await

当遇到 await 时：
暂停 async 函数执行
将函数剩余部分放入微任务队列
继续执行事件循环中的其他任务
当 Promise 解决后，恢复 async 函数执行

console.log("Start");async function example() {console.log("Before await");await new Promise(res => setTimeout(res, 1000));console.log("After await");
}example();console.log("End");/* 输出顺序:
Start
Before await
End
(1秒后)
After await
*/

2. 错误处理机制

async/await 使用 try/catch 处理错误，类似同步代码：

async function fetchWithRetry(url, retries = 3) {try {const response = await fetch(url);if (!response.ok) throw new Error(`HTTP error: ${response.status}`);return await response.json();} catch (error) {if (retries > 0) {console.log(`Retrying... (${retries} left)`);await new Promise(res => setTimeout(res, 1000))