如何在javascript中优雅地处理异步操作_掌握async和await的核心概念【教程】_技术教程

async/await 是 Promise 的封装而非语法糖，async 函数必返回 Promise，await 只能在 async 函数内使用，需配合 try/catch 处理错误，且不阻塞主线程。

直接用 async 和 await 就能写出接近同步逻辑的异步代码，但前提是理解它不是语法糖的“魔法”，而是 Promise 的封装层——写错地方、漏掉 try/catch、误判执行时机，都会让“优雅”变成“诡异”。

async 函数返回值永远是 Promise

哪怕你 return 42，函数实际返回的是 Promise.resolve(42)；如果 throw new Error()，则等价于 Promise.reject(...)。这决定了你不能在普通函数里直接接收“结果”，必须用 await 或 .then() 拆包。

错误写法：

function fetchData() {
  return async () => { /* ... */ };
}
const result = fetchData(); // 这是函数，不是 Promise

正确写法：

async function fetchData() {
  const res = await fetch('/api');
  return res.json();
}
const promise = fetchData(); // ✅ 返回 Promise

调用时必须处理 Promise：要么 await fetchData()（在另一个 async 函数里），要么 fetchData().then(...)

await 只能在 async 函数内部使用

这是语法限制，不是运行时错误。ESLint 会报 Parsing error: 'await' is only allowed within async functions，浏览器直接 SyntaxError。

常见翻车场景：

function handleButton() {
  const data = await getData(); // ❌ 报错：不在 async 函数中
}

修复方式只有两种：
– 把外层函数标记为 async：

async function handleButton() {
  const data = await getData();
}

– 或者不用 await，改用链式 .then()：

function handleButton() {
  getData().then(data => { /* ... */ });
}

注意：箭头函数也要显式声明 async：const fn = async () => { await something(); }，不能省略 async

忘记 try/catch 会导致未捕获异常

await 遇到 rejected Promise 会像 throw 一样中断执行，但不会自动被上层捕获——它会冒泡成未处理的 Promise rejection，控制台报黄（或红）字，Node.js 可能直接退出进程。

危险写法：

async function login() {
  const res = await fetch('/login', { method: 'POST' });
  const json = await res.json(); // 如果 res.status >= 400，res.json() 可能失败
  return json.token;
}

安全写法（推荐）：

async function login() {
  try {
    const res = await fetch('/login', { method: 'POST' });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const json = await res.json();
    return json.token;
  } catch (err) {
    console.error('Login failed:', err);
    throw err; // 或者返回默认值、重定向等
  }
}

小技巧：对多个 await 做统一错误处理，比每个都包 try/catch 更干净；但如果某一步失败不影响后续（比如并行请求），就该用 Promise.allSettled()

await 不阻塞整个线程，但会暂停当前 async 函数执行

这是最容易误解的一点：很多人以为 await 会让 JS 引擎“卡住”，其实它只是暂停当前函数，把控制权交还给事件循环，其他任务（如定时器、用户点击）照常运行。

典型误区：

async function delayAndLog() {
  console.log('start');
  await new Promise(r => setTimeout(r, 1000));
  console.log('end'); // 这行会在 1s 后执行，但期间页面不卡顿
}
delayAndLog();
console.log('immediate'); // ✅ 立刻输出