JavaScript 中怎么用 try catch 捕获 async 函数中的网络请求失败-js教程-PHP中文网

在 async 函数中需 await fetch 并检查 response.ok 才能捕获网络异常和 http 错误；否则 404/500 不抛错，.json() 也可能失败；推荐封装 safefetch 统一处理，并用 abortcontroller 支持取消请求。

javascript 中怎么用 try catch 捕获 async 函数中的网络请求失败

在 async 函数中，不能直接用 try...catch 捕获 fetch 或其他 Promise 拒绝（reject）的错误，除非你显式地 await 它——因为 fetch 本身只在网络级失败（如断网、DNS 失败）时 reject，而 HTTP 错误状态（如 404、500）仍会 resolve，需手动检查。

✅ 正确：await + try catch + 检查 response.ok

这是最常用也最推荐的方式：

必须 await fetch()，否则 catch 捕不到网络异常；
fetch 成功返回 Response 对象后，要主动判断 response.ok（即 status 在 200–299），否则 4xx/5xx 不会抛错；
若需 JSON 数据，再 await response.json()，它也可能抛错（如返回非 JSON 内容）。

示例：

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (err) {
    console.error('请求失败:', err.message);
    // 这里能捕获：网络中断、跨域拒绝、404/500 等主动 throw 的错误、JSON 解析失败
  }
}

⚠️ 常见误区：没 await 或漏判 response.ok

下面写法是错的：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

fetch(...).then(...) 写在 try 中 → fetch 返回 Promise，try 不会等它，catch 捕不到；
await fetch(...) 但没检查 response.ok → 404 会静默通过，data 可能是服务端错误页 HTML，后续 .json() 报错或数据结构异常；
只 catch 一次，却在 .json() 后继续用 data → 若 .json() 失败（如返回空字符串或 XML），会抛未捕获错误。

? 进阶：封装成可复用的请求函数

把错误处理逻辑抽出来，避免重复：

async function safeFetch(url, options = {}) {
  try {
    const res = await fetch(url, options);
    if (!res.ok) {
      const msg = `HTTP ${res.status} ${res.statusText}`;
      throw Object.assign(new Error(msg), { status: res.status, response: res });
    }
    return res;
  } catch (err) {
    throw err.name === 'AbortError'
      ? new Error('请求已取消')
      : new Error(`网络请求失败: ${err.message}`);
  }
}

// 使用
async function loadPost() {
  try {
    const res = await safeFetch('/api/post/123');
    const post = await res.json();
    console.log(post);
  } catch (err) {
    alert(err.message);
  }
}