async/await 配合 try...catch 处理网络错误时，fetch 仅在网络失败时 reject，4xx/5xx 响应仍 resolve，需手动检查 response.ok 或 status 判断 http 错误。
在 JavaScript 中，用 async/await 配合 try...catch 处理网络错误，核心是把 fetch（或其他 Promise-based 请求）放在 try 块中，捕获拒绝（reject）和运行时异常，同时注意 fetch 本身不会因 HTTP 状态码（如 404、500）而抛错——这需要手动检查。
fetch 不会自动抛出 HTTP 错误，需手动判断 status
fetch 只在网络请求完全失败（如断网、域名不存在、CORS 拒绝）时才 reject；返回 4xx/5xx 响应时仍 resolve，必须检查 response.ok 或 response.status：
-
response.ok是布尔值，等价于status >= 200 && status - 建议在
await response.json()前先校验状态，避免解析错误响应体
标准写法：try 中 await fetch + 显式错误检查
示例代码：
async function getUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
const data = await res.json();
return data;
} catch (err) {
console.error('获取用户失败:', err.message);
// 可在此统一处理：上报错误、提示用户、返回默认值等
throw err; // 或 return null / { error: true }
}
}
常见错误类型要区分处理
实际中可能遇到多种错误，可分类响应：
-
网络层错误：如
TypeError: Failed to fetch（离线、跨域失败） -
HTTP 错误：如
401 Unauthorized，适合跳转登录页 -
JSON 解析错误：服务端返回非 JSON 内容（如 HTML 错误页），
res.json()会 throw -
业务逻辑错误：API 返回
{ success: false, msg: 'xxx' }，需额外判断
进阶：封装通用请求函数
避免重复写 try/catch 和状态检查，可封装一个带错误分类的 request 函数：
async function request(url, options = {}) {
try {
const res = await fetch(url, {
headers: { 'Content-Type': 'application/json', ...options.headers },
...options
});
if (!res.ok) {
const errorData = await res.json();
throw Object.assign(new Error(`${res.status} ${res.statusText}`), {
status: res.status,
data: errorData
});
}
return await res.json();
} catch (err) {
if (err.name === 'TypeError' && err.message.includes('fetch')) {
throw new Error('网络连接异常，请检查网络');
}
throw err;
}
}
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
