当前位置：首页 > article >正文

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

article 2025/3/31 4:20:03

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

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

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

状态码范围	前端捕获位置	触发条件	示例场景
`200` - `299` (成功)	→ `try` 中	服务器成功处理请求并返回数据	`200 OK`、`201 Created`
`400` - `499` (客户端错误)	→ `catch` 中	客户端请求有问题（参数错误、权限不足等）	`400 Bad Request`、`401 Unauthorized`、`404 Not Found`
`500` - `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的时候就要慎重考虑了

常见状态码示例

状态码	含义	前端捕获位置	典型场景
`200`	OK（成功）	`try`	密码修改成功
`400`	Bad Request（请求错误）	`catch`	新旧密码相同、参数缺失
`401`	Unauthorized（未授权）	`catch`	Token 过期或无效
`404`	Not Found（未找到）	`catch`	接口路径错误
`500`	Server Error（服务器错误）	`catch`	数据库连接失败、未处理的异常

关键点总结

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