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

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

核心概念

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))