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 中捕获

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

复制代码

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

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

复制代码

---

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企服之家，中国第一个企服评测及商务社交产业平台。