JavaScript中如何使用async/await？

在JavaScript中使用async/await需遵循以下步骤和规范，其核心是通过语法糖简化异步编程，使代码更接近同步逻辑：

• 使用async关键字声明函数，使其自动返回一个Promise对象。即使函数体中未显式返回Promise，也会被包装为已解决的Promise。
• 示例：javascript async function fetchData() { return "Data fetched"; // 实际返回 Promise.resolve("Data fetched") }

• 在async函数内部，使用await暂停执行，直到Promise完成（成功或失败），并返回结果或抛出错误。
• 关键点：

  await仅在async函数内有效，否则会抛出语法错误。

  适用于Promise对象或返回Promise的异步操作（如fetch、fs.promises.readFile等）。

• 示例：javascript async function fetchUserData(userId) { const response = await fetch(`
  https://api.example.com/user/
  ${userId}`); const userData = await response.json(); // 等待解析JSON return userData; }

• 用try/catch捕获await可能抛出的错误（如网络请求失败、JSON解析错误等），避免未处理的异常。
• 示例：javascript async function fetchUserData(userId) { try { const response = await fetch(`
  https://api.example.com/user/
  ${userId}`); if (!response.ok) throw new Error("Network error"); const userData = await response.json(); return userData; } catch (error) { console.error("Fetch failed:", error); throw error; // 可选择重新抛出或返回默认值 } }

• 当需要同时执行多个独立异步任务时，使用Promise.all结合await实现并行，提升性能。
• 示例：javascript async function fetchMultipleUsers(userIds) { try { const promises = userIds.map(id => fetchUserData(id)); const usersData = await Promise.all(promises); return usersData; } catch (error) { console.error("Failed to fetch users:", error); } }

• 避免滥用：

  简单同步逻辑无需强制使用async/await。

  高并发场景（如批量请求）需权衡性能，Promise.all可能比顺序await更高效。

• 性能开销：

  每个await会隐式创建微任务队列，频繁使用可能影响性能，但多数场景可忽略。

• 调试技巧：

  使用console.log或浏览器调试器检查await执行顺序，确保逻辑符合预期。

• 顶层await（ES2022）：

  在ES模块中可直接使用顶层await（无需包裹在async函数内），但需注意兼容性。

  示例：

  // ES模块中const response = await fetch("
  https://api.example.com/data"
  );const data = await response.json();

• 回调地狱示例：javascript function fetchUserDataCallback(userId, callback) { fetch(`
  https://api.example.com/user/
  ${userId}`, (err, response) => { if (err) return callback(err); response.json((err, data) => { if (err) return callback(err); callback(null, data); }); }); }
• Promise链改进：javascript function fetchUserDataPromise(userId) { return fetch(`
  https://api.example.com/user/
  ${userId}`) .then(response => { if (!response.ok) throw new Error("Network error"); return response.json(); }); }
• async/await最优解：javascript async function fetchUserData(userId) { const response = await fetch(`
  https://api.example.com/user/
  ${userId}`); if (!response.ok) throw new Error("Network error"); return await response.json(); }

async/await通过同步化语法显著提升了异步代码的可读性和可维护性，尤其适合复杂逻辑或需要顺序执行的场景。合理使用try/catch和Promise.all能进一步优化错误处理和性能。在实际项目中，建议结合具体需求选择异步方案，避免过度设计。