await

在前端开发中，await 是 JavaScript 中用于处理异步操作的关键字，通常与 async 函数配合使用，让异步代码的写法更接近同步代码的逻辑，提高可读性。

基本用法

await 只能在 async 函数内部使用，用于等待一个 Promise 对象的状态变为 resolved（完成）或 rejected（拒绝）。

// 定义一个返回 Promise 的异步函数
function fetchData() {return new Promise((resolve) => {setTimeout(() => {resolve("数据加载完成");}, 1000);});
}// 使用 async/await 处理异步操作
async function handleData() {console.log("开始加载数据...");// 等待 Promise 完成，并获取结果const result = await fetchData();console.log(result); // 1秒后输出："数据加载完成"console.log("处理结束");
}handleData();

处理网络请求

在前端，await 最常见的用途是处理网络请求（如 fetch 或 Axios）：

async function getUserData() {try {// 等待 fetch 请求完成const response = await fetch('https://api.example.com/user');// 等待响应转为 JSONconst user = await response.json();console.log('用户数据:', user);return user;} catch (error) {// 捕获所有可能的错误（网络错误、解析错误等）console.error('获取数据失败:', error);}
}getUserData();

并行处理多个异步操作

async function loadMultipleResources() {// 同时发起多个请求const [user, posts, comments] = await Promise.all([fetch('/api/user').then(res => res.json()),fetch('/api/posts').then(res => res.json()),fetch('/api/comments').then(res => res.json())]);console.log('用户:', user);console.log('文章:', posts);console.log('评论:', comments);
}

注意事项

1.必须在 async 函数中使用：如果在非 async 函数中使用 await，会报语法错误。

2.错误处理：通常使用 try/catch 捕获 await 可能抛出的错误（如网络失败、Promise 被拒绝等）。

3.执行顺序：await 会暂停当前 async 函数的执行，直到等待的 Promise 完成，再继续执行后续代码。

4.不要过度使用：不必要的 await 会导致代码串行执行，降低效率（可使用 Promise.all() 并行处理）。

async/await 是对 Promise 的语法糖，让异步代码的逻辑更清晰，是现代前端开发中处理异步操作的首选方式。