在 async 函数中需 await fetch 并检查 response.ok 才能捕获网络异常和 HTTP 错误；否则 404/500 不抛错，.json() 也可能失败；推荐封装 safeFetch 统一处理，并用 AbortController 支持取消请求。
在 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...
立即学习“Java免费学习笔记（深入）”；
-
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);
}
}
? 补充：AbortController 主动取消请求
配合 try...catch，还能优雅处理用户取消或超时：
- 创建
AbortController，传signal给fetch； - 调用
controller.abort()触发AbortError，会被 catch 捕获； - 适合表单搜索防抖、页面卸载前取消请求等场景。
不复杂但容易忽略。
