axios的响应拦截器 - 错误统一处理 / 获取数据繁琐

1. 问题

登录时，填写错误的用户名密码，没有错误提示(没有进入catch分支)
获取ajax的返回结果比较麻烦：res.data.data.xxxx

2.解决登录失败不报错的问题

2.1 分析原因

首先 axios 内部的报错机制：

如果本次请求得到的响应的状态码不是 2 开头的（如：400，500），就会主动抛出错误。
如果本次请求出现网络错误，就会主动抛出错误

但当用户用户名和密码输入错误时，本次请求的状态码是正常的（虽然 success 字段是false），也没有网络错误，所以axios并不会报错

2.2 解决思路

在响应拦截器中，根据本次请求返回的数据中的 success 字段值，来决定是否主动抛出错误。

这个错误处理，是和后端进行了约定

// 响应拦截器
service.interceptors.response.use(response => {if (response.data.success) {// 数据正常，进行的逻辑功能return response} else {// 如果返回的 success 是 false，表明业务出错，直接触发 reject// 抛出的错误，被 catch 捕获return Promise.reject(new Error(response.data.message))}
}, error => {// 对响应错误做点什么return Promise.reject(error)
})

3. 解决获取有效数据代码冗余的问题

3.1 问题说明

观察api的返回结果，我们发现axios在处理接口返回值时，默认会自动给包裹一个data字段，这导致我们每次在业务模块获取数据都需要写res.data.data.xxxx，这样太麻烦了。

3.2 解决思路

在返回有效数据时，直接返回res.data

// 响应拦截器
service.interceptors.response.use(response => {if (response.data.success) {// 数据正常，进行的逻辑功能
+   return response.data} else {// 如果返回的 success 是 false，表明业务出错，直接触发 reject// 抛出的错误，被 catch 捕获return Promise.reject(new Error(response.data.message))}
}, error => {// 对响应错误做点什么return Promise.reject(error)
})

4. 错误统一处理

4.1 问题说明

如果每次发起请求后，都进行错误处理，会让代码也非常冗余

我们既然在响应拦截器中进行获取到了错误的状态码，这时候就可以进行错误的统一处理

import { Message } from 'element-ui'// 响应拦截器
service.interceptors.response.use(response => {if (response.data.success) {// 数据正常，进行的逻辑功能
+    return response.data} else {// 如果返回的 success 是 false，表明业务出错，直接触发 reject// 抛出的错误，被 catch 捕获Message.error(response.data.message)return Promise.reject(new Error(response.data.message))}
}, error => {// 对响应错误做点什么Message.error(error.message)return Promise.reject(error)
})

5. 再次简化代码

service.interceptors.response.use(response => {if (response.data.success) {// response.data 是解决数据的获取繁琐问题return response.data} else {+      Message({+        message: response.data.message,
+        type: 'error'})// 如果返回的状态失败，需要抛出错误的信息return Promise.reject(new Error(response.data.message))}},error => {Message({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)

axios的响应拦截器 - 错误统一处理 / 获取数据繁琐相关推荐

Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
axios的响应拦截器
一.拦截器介绍: 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
Vue配置axios响应拦截器
一个项目会发送很多请求到后端,每个请求都有如下的响应不想每个请求都去判断里面的status,那么可以使用axios的响应拦截器,对服务端返回的一些相同点做统一的处理比如说如果有报错,就统一弹出这么 ...
前端401错误解决方法:响应拦截器
目录 1.该问题出现的原因 2.处理401问题的解决方案原理 3.使用响应拦截器解决问题 1.该问题出现的原因在前后端分离项目中,最常见的是前端点击登录后,后端返回token字符串,这个token可 ...
401错误解决方法:响应拦截器
关于401错误 401错误场景 1. 用户未登录,代码报401,应该回到登录页 2. 登录用户的token过期 : 怎样理解token过期? . 就是登录成功了以后,后端会返回一个token值,这个值 ...
vue 项目 axios 响应拦截器统一判断401 (登录)过期
背景: 为了模拟token 过期,专门把token 设置错误,为401 界面把axios 官网里的复制到拦截器里放置到request.js 里在响应器里进行判断4**, 5** 状态码错误 ...
axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一.请求拦截器设置headers,给所有请求加上Authorization:token值二.响应拦截器直接去访问/article,发现可以进入到article内容管理页面原 ...