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 + 显式错误检查
示例代码:
Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
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 }
}
}
常见错误类型要区分处理
实际中可能遇到多种错误,可分类响应:
立即学习“Java免费学习笔记(深入)”;
-
网络层错误:如
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;
}
}

















