javascript中async和await如何使用_如何处理多个异步任务_技术教程

async函数自动返回Promise，await在async内暂停执行等待Promise完成；多任务需据依赖关系选Promise.all（并行）或链式await（串行），并合理处理错误。

async 和 await 是 JavaScript 中处理异步操作的语法糖，本质基于 Promise，让异步代码写起来像同步一样清晰。关键不是“要不要用”，而是“怎么用对”——尤其在多个异步任务并行或串行时，容易误用 await 导致性能下降。

async 函数：让函数自动返回 Promise

只要在函数声明前加 async，该函数就一定会返回一个 Promise。即使 return 一个普通值，也会被自动包装成 Promise.resolve(value)。

示例：

async function fetchData() {
return "done";
}
console.log(fetchData()); // Promise { 'done' }

await：只能在 async 函数内暂停等待 Promise 完成

await 后面必须是一个 Promise（或可转为 Promise 的值），它会暂停当前 async 函数的执行，直到 Promise settled（fulfilled 或 rejected），然后继续往下走。

注意：
• await 不会阻塞整个线程，只是暂停当前 async 函数；
• 如果 await 的 Promise 被 reject，且没被 try/catch 捕获，会直接让当前 async 函数返回 rejected Promise。

常见写法：

async function loadUser() {
  try {
    const res = await fetch('/api/user');
    const user = await res.json();
    return user;
  } catch (err) {
    console.error('加载失败', err);
  }
}

多个异步任务：并行 vs 串行，别傻等

错误做法：连续 await → 实际是串行，每个等完才发起下一个，耗时叠加。

正确策略取决于需求：

需要全部完成，且不依赖顺序 → 用 Promise.all() 并行发起：

async function loadAll() {
  const [user, posts, comments] = await Promise.all([
    fetch('/api/user').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  return { user, posts, comments };
}

✅ 快：3 个请求同时发出，总耗时 ≈ 最慢那个。

❌ 缺点：任一失败，整个 Promise.all() 就 reject。

想忽略个别失败，拿到所有结果（包括失败） → 用 Promise.allSettled()：

const results = await Promise.allSettled([
  fetch('/api/user'),
  fetch('/api/timeout'), // 假设超时
  fetch('/api/posts')
]);
// results 是数组，每项有 status: 'fulfilled' | 'rejected'

必须按顺序执行，且后一步依赖前一步结果 → 才用链式 await：

async function sequential() {
  const token = await login();
  const profile = await fetch('/api/profile', {
    headers: { Authorization: `Bearer ${token}` }
  }).then(r => r.json());
  const settings = await fetch(`/api/settings?uid=${profile.id}`).then(r => r.json());
  return { profile, settings };
}

错误处理：别只靠顶层 try/catch

await 失败会抛出异常，但不同场景要不同处理：

单个关键请求失败不能继续 → 用 try/catch 包裹那个 await；
某个非关键请求失败可降级 → 用 .catch(() => defaultValue) 或 await Promise.resolve().catch(...)；
多个并行请求中只想捕获特定错误 → 先用 Promise.allSettled，再遍历检查状态。

小技巧：封装一个安全 await 工具函数：

async function safeAwait(promise) {
  try {
    const res = await promise;
    return [null, res];
  } catch (err) {
    return [err, null];
  }
}
// 使用：
const [err, data] = await safeA