百度关键词优化怎么做_个人年终总结ppt模板下载_seo营销推广公司_常用网站推广方法及资源

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	数据库连接失败、未处理的异常

---

关键点总结

1. 2xx 状态码
   • 表示成功，前端在 try 中处理。
   • 例如：200（成功）、201（创建成功）。

2. 4xx/5xx 状态码
   • 表示错误，前端在 catch 中处理。
   • 4xx 是客户端问题（如 400 参数错误、401 未授权）。
   • 5xx 是服务端问题（如 500 服务器崩溃）。

3. 前端统一错误处理
   • 在 catch 中通过 error.response 获取状态码和错误信息。
   • 根据状态码显示不同的用户提示（如 401 跳转到登录页）。

---

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