async和await怎么用？详细教程

async/await 是 JavaScript 中简化异步编程的实用工具，本质是 Promise 的语法糖，而非魔法——它能帮你告别“明明写了异步逻辑却拿不到结果”的困境，但用错反而更难调试；关键在于理解：async 函数必定返回 Promise（哪怕显式 return 基本类型），await 只能在 async 内部使用且会自动包装普通值、真正等待 Promise，错误必须用 try/catch 主动捕获，否则触发未捕获拒绝，而看似同步的代码实则仍在事件循环中运行，调试时需警惕执行时机与 Promise 状态的错位；真正决定成败的，从来不是语法本身，而是你是否清楚每个 await 后面的对象是否真是 Promise、谁创建了它、谁负责处理它的成功与失败。

async 函数一定返回 Promise，不管你愿不愿意

哪怕你写 async function foo() { return 42; }，调用 foo() 得到的也不是 42，而是一个 Promise { 42 }。这是所有混乱的起点。

• 想拿到真实值？必须用 await foo()（在另一个 async 函数里）或 foo().then(...)
• 直接在普通函数里调用 foo() 并赋值给变量，得到的是 Promise 对象，不是结果——比如 const res = foo(); console.log(res) 打印的是 Promise { }
• 没 return？自动等价于 return Promise.resolve(undefined)

async function getValue() {
  return "done";
}
console.log(getValue()); // Promise { 'done' }
console.log(await getValue()); // SyntaxError: await is only valid in async functions

await 只能等 Promise，但会“自动兼容”普通值

await 后面接的表达式，如果是普通值（数字、字符串、对象），它会立刻包装成 Promise.resolve(...)；如果是 Promise，就真等它 resolve 或 reject。关键在于：它只在 async 函数内部有效。

• 常见错误：await 写在非 async 函数里 → 报错 SyntaxError: await is not allowed in this context
• 别以为 await 123 会卡住——它不会，只是立刻返回 123；真正“等待”的是像 await fetch('/api') 这类返回 Promise 的调用
• 如果你封装了一个老接口（比如 uni.request 或 XMLHttpRequest），它本身不返回 Promise，那 await 就完全无效——必须先用 new Promise(...) 包一层

function legacyApi() {
  return { data: "old" };
}
async function wrapper() {
  const a = await legacyApi(); // ✅ 没问题，a === { data: "old" }
  const b = await fetch("/api"); // ✅ 真正等待网络响应
  return b;
}

错误处理不能只靠 try/catch，还要防“未捕获拒绝”

try/catch 能捕获 await 表达式中 Promise reject 的错误，但它救不了你漏掉的 Promise 链尾部。

• 如果 await someAsyncFn() 抛错，且你没写 catch，错误会变成未处理的 Promise rejection，控制台报黄警告，Node.js 可能直接退出进程
• 多个 await 串行时，一个失败，后续不会执行——这是优点，但也要意识到“流程中断”是默认行为
• 想让某个 await 失败也不中断后续？得手动用 .catch(() => null) 或 await Promise.resolve().catch(...) 把错误吞掉

async function riskyFlow() {
  try {
    const user = await fetchUser(); // 如果这里 reject，下面不会执行
    const profile = await fetchProfile(user.id);
    return { user, profile };
  } catch (err) {
    console.error("流程中断在", err.message);
    throw err; // 或者 return null / fallback
  }
}

调试时别被“看起来同步”骗了

代码看着像同步，但执行时机仍在事件循环里。最典型的坑是：你在 await 后面加断点，以为能“看到结果”，结果发现变量还是 undefined——因为那个 await 还没完成，断点停得太早。

• Chrome DevTools 中，对 await 行设断点，按 F8 单步时，会真正等到 Promise settle 后再进下一行——这是优势，但前提是 Promise 确实已创建并运行
• 如果 await 后面是个还没触发的定时器或未发起的请求，断点会“悬停”，容易误判为卡死
• 别在 await 前后混用 setTimeout 或 Promise.resolve().then() 来“测顺序”——这只会加深对微任务/宏任务的误解

本篇关于《async和await怎么用？详细教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！