响应拦截器的判断

在写响应拦截器的时候,通常会对状态码进行判断,但是这个时候就会有个问题,res.statusres.data.code都可以说是状态码,这个时候用哪个来进行判断呢?本文为你讲解这个问题

1. res.status

res.status 是 HTTP 响应的状态码,它表示的是 HTTP 请求的总体处理结果。它是由服务器返回的一个数字,通常用来判断请求是否成功。例如:

  • 200:请求成功,服务器正常返回响应。
  • 201:资源已成功创建。
  • 400:请求参数错误(客户端请求问题)。
  • 401:未授权,用户未登录或权限不足。
  • 404:资源未找到。
  • 500:服务器内部错误。

这些状态码是 HTTP 协议的一部分,用来描述服务器处理请求的结果。

示例:
js 复制代码
// HTTP响应的状态码
res.status === 200  // 请求成功
res.status === 404  // 请求的资源未找到

2. res.data.code

res.data.code 通常是由后端在响应体内返回的自定义字段,它代表了后端业务处理的结果。这个字段并非 HTTP 协议的一部分,而是后端根据业务需求定义的,通常用于描述特定的业务逻辑结果或状态。

  • res.data.code 可能是一些数值或字符串,用来表示业务层面的操作是否成功,或者包含错误信息。

  • 比如,

    code
    

    字段可能会在以下情况下返回:

    • 0200:表示请求的业务操作成功。
    • 1500:表示某个业务逻辑错误或系统内部错误。
    • 其他数字:可能代表特定的业务错误码,比如用户不存在、密码错误等。

res.data.code 主要用于判断业务逻辑是否成功,并根据不同的 code 值进行相应的处理。

js 复制代码
// 后端返回的自定义业务代码
if (res.data.code === 200) {
  // 登录成功
} else if (res.data.code === 401) {
  // 未授权,跳转到登录页面
} else {
  // 其他错误,根据code处理
  console.error('错误码:', res.data.code);
}

3. res.statusres.data.code 的区别

  • res.status:是 HTTP 协议中的标准状态码,表示 HTTP 请求的整体处理状态,主要用于判断请求是否成功发送到服务器并且有正确的响应返回。
  • res.data.code:是后端业务逻辑中的自定义状态码,用来描述业务操作的成功或失败。它通常包含更详细的业务信息,比如用户输入错误、权限问题、操作成功等。

通常情况下,需要同时检查这两个值来判断请求的结果:

  1. HTTP 状态码 (res.status):检查网络请求是否成功(比如是否网络连接正常,是否得到响应)。
  2. 业务码 (res.data.code):检查具体的业务逻辑是否成功(比如登录是否成功、数据是否有效)。

假设你在前端发送了一个登录请求,并且后端返回了以下响应:

js 复制代码
{
  "status": 200, 
  "message": "登录成功", 
  "data": {
    "code": 0,
    "userId": 10966,
    "token": "6630e5a6e217ace0decd014050b30ec8"
  }
}

正确处理方式如下:

js 复制代码
// 首先检查 HTTP 状态码
    if (response.status !== 200) {
      throw new Error('网络请求失败');
    }

    // 然后检查业务逻辑状态码
    if (response.data.code !== 0) {
      throw new Error('登录失败,错误代码: ' + response.data.code);
    }

    // 如果没有错误,则返回响应数据
    return response.data;

  } catch (error) {
    console.error('请求失败:', error);
    throw error; // 重新抛出错误以便在调用处捕获
  }

如果顺序弄反了,很有可能就会出现后端提示响应成功,但是前端响应拦截器却捕捉到了错误

总结:

  • res.status:用来判断 HTTP 请求的状态,告诉你请求是否成功(如 200 表示成功,500 表示服务器错误)。
  • res.data.code :是后端业务逻辑中的状态码,通常用来表示具体的操作是否成功或失败。根据不同的业务场景,后端可以自定义不同的 code 来传递详细的业务结果。
相关推荐
活宝小娜40 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点43 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow44 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter