IT评测·应用市场-qidao123.com技术社区

标题: HTTP 状态码与前端 try-catch 捕获关系 [打印本页]

作者: 万万哇 时间: 7 天前
标题: HTTP 状态码与前端 try-catch 捕获关系
HTTP 状态码与前端 try-catch 捕获关系

以下是 HTTP 状态码在前端 try-catch 中的捕获情况的详细解释，使用表格和箭头表示流程：

HTTP 状态码与前端 try-catch 捕获关系

状态码范围前端捕获位置触发条件示例场景200 - 299 (乐成)→ try 中服务器乐成处理请求并返回数据200 OK、201 Created400 - 499 (客户端错误)→ catch 中客户端请求有问题（参数错误、权限不足等）400 Bad Request、401 Unauthorized、404 Not Found500 - 599 (服务端错误)→ catch 中服务器内部处理失败500 Internal Server Error

具体流程图示

代码中的具体表现

1. 乐成相应（2xx） → try 中捕获

try {
const res = await http.post("/api/users/change_pwd", passwordForm);
// 状态码为 2xx 时进入这里
console.log(res.data); // 获取响应数据
message.success(res.data.msg); // 显示成功提示
} catch (error) {
// 不会进入这里
}

复制代码

2. 错误相应（4xx/5xx） → catch 中捕获

try {
const res = await http.post("/api/users/change_pwd", passwordForm);
// 不会进入这里
} catch (error: any) {
// 状态码为 4xx 或 5xx 时进入这里
console.log(error.response.status); // 获取状态码（如 400、401、500）
message.error(error.response.data.msg); // 显示错误提示
}

复制代码

3. 注意

有的时间你的vue代码大概使用了http拦截器，里面对相应的状态码进行判断了，如：

这个时间后端返回状态码status的时间就要慎重思量了
常见状态码示例

状态码寄义前端捕获位置范例场景200OK（乐成）try暗码修改乐成400Bad Request（请求错误）catch新旧暗码类似、参数缺失401Unauthorized（未授权）catchToken 过期或无效404Not Found（未找到）catch接口路径错误500Server Error（服务器错误）catch数据库毗连失败、未处理的非常

关键点总结

2xx 状态码
• 表示乐成，前端在 try 中处理。
• 例如：200（乐成）、201（创建乐成）。
4xx/5xx 状态码
• 表示错误，前端在 catch 中处理。
• 4xx 是客户端问题（如 400 参数错误、401 未授权）。
• 5xx 是服务端问题（如 500 服务器瓦解）。
前端同一错误处理
• 在 catch 中通过 error.response 获取状态码和错误信息。
• 根据状态码显示不同的用户提示（如 401 跳转到登录页）。

通过这种设计，前端可以清楚地区分乐成和失败逻辑，并根据状态码提供精准的用户反馈。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)