当前位置：首页 > 文章列表 > 文章 > 前端 > asyncawait用法及错误处理详解

asyncawait用法及错误处理详解

2026-01-27 09:42:30 0浏览收藏

golang学习网今天将给大家带来《JavaScript中async await用法及错误处理》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

async/await是基于Promise的现代异步语法，使代码更简洁可读；async函数返回Promise，await暂停执行但不阻塞线程；错误可用try/catch捕获，需注意作用域与并发处理。

JavaScript中async_await如何使用_错误如何捕获

async/await 是 JavaScript 中处理异步操作的现代写法，让异步代码看起来像同步代码一样清晰。它基于 Promise，但语法更简洁、可读性更强。错误捕获方式也和传统 try/catch 一致，不需额外学习新机制。

async/await 基本用法

函数前加 async 关键字，内部用 await 等待 Promise 完成。await 只能在 async 函数里用。

async 函数总是返回一个 Promise，即使你 return 一个普通值，也会被自动包装成 resolved 的 Promise
await 后面跟的是 Promise 实例（或任何值）；如果是非 Promise，会立即转成 resolved Promise
await 会暂停当前 async 函数的执行，但不会阻塞整个线程，其他任务照常运行

示例：

async function fetchUser() {
  const res = await fetch('/api/user');
  const user = await res.json();
  return user;
}

错误捕获：用 try/catch 包裹 await

await 抛出的异常（比如 Promise reject 或运行时错误）可以直接用标准的 try/catch 捕获，不需要 .catch() 链式调用。

网络请求失败、JSON 解析出错、await 后面的表达式抛异常，都会进入 catch 块
catch 接收的参数就是被 reject 的值（通常是 Error 实例）
如果没写 try/catch，错误会变成这个 async 函数返回的 Promise 的 rejection，需在调用处处理

示例：

async function fetchUser() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const user = await res.json();
    return user;
  } catch (err) {
    console.error('获取用户失败：', err.message);
    return null;
  }
}

多个 await 的错误边界要注意

每个 await 都可能出错，但 try/catch 是语句块级的。一个 try 块里多个 await，任一出错都会跳进 catch，后续 await 不再执行。

想独立处理每个异步操作的错误，就分开 try/catch
想按顺序执行且某步失败就中止，共用一个 try/catch 更合适
并发请求（如同时拉多个接口）建议用 Promise.all + await，并统一捕获整体失败

示例（并发 + 错误隔离）：

async function fetchAll() {
  const [userP, postP] = [
    fetch('/api/user').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
  ];
  try {
    const [user, posts] = await Promise.all([userP, postP]);
    return { user, posts };
  } catch (err) {
    // 任一请求失败都会到这里
    console.error('加载数据失败', err);
  }
}