async 和 await 是简化异步编程的语法糖, 通过同步代码结构实现异步操作
- 定义 async 函数
async 函数通过 async 关键字标记，返回一个 Promise 对象：
async function getData() {
return "Hello World"; // 返回的值会被包装成 Promise.resolve("Hello World")
}
getData().then(result => console.log(result)); // 输出 "Hello World" :ml-citation{ref="4,8" data="citationList"}
- 使用 await 等待异步操作
await 必须在 async 函数内部使用，用于等待 Promise 完成：
async function fetchData() {
const response = await fetch('https://api.example.com/data'); // 等待网络请求完成
const data = await response.json(); // 等待解析 JSON
return data;
}
- 错误处理
用 try...catch 捕获异步操作中的错误：
async function loadUser() {
try {
const response = await fetch('https://api.example.com/user');
if (!response.ok) throw new Error('请求失败');
return await response.json();
} catch (error) {
console.error('加载用户失败:', error);
return null;
}
}
此方式替代了传统 Promise 的 .catch() 链式调用。
- 顺序执行异步操作
多个 await 按顺序执行，适用于有依赖关系的异步任务：
async function processOrder() {
const user = await getUser(userId); // 先获取用户信息
const order = await getOrder(user.id); // 再根据用户 ID 获取订单
return { user, order };
}
每一步等待上一步完成后执行
注意事项
1. 必须成对使用：await 必须在 async 函数内部。
- 返回值为 Promise：即使函数内返回非 Promise 值，也会被包装成 Promise。
- 避免阻塞：await 不会阻塞主线程，但会暂停当前 async 函数的执行，直到 Promise 完成.
🌰:
function test() {
return new Promise(((resolve, reject) => {
//假装是你的异步任务：
const isSuccess = true
if (isSuccess)
resolve('异步任务2成功')
else
reject('异步任务2失败')
}))
}
async function main() {
//任务1，3，4是同步任务
console.log('任务1')
const data = await test();
console.log(data)
console.log('任务3')
}
// 调用
main()
console.log("任务4")
打印:
任务 1
任务 4
任务2成功
任务 3
完整示例：用户登录流程
async function login(username, password) {
try {
// 1. 验证用户
const user = await validateUser(username);
// 2. 检查密码
const isValid = await checkPassword(user.id, password);
if (!isValid) throw new Error('密码错误');
// 3. 获取权限
const permissions = await fetchPermissions(user.id);
return { user, permissions };
} catch (error) {
console.error('登录失败:', error);
throw error; // 重新抛出错误供外部处理
}
}
网友评论