在我们平常调用接口的时候,会使用到拦截器这个工具，大致有两种用法，请求拦截和响应拦截。

请求拦截

axios.interceptors.request.use((config)=>{return config
},(error)=>{return Promise.reject(error)
})

解析:请求拦截这个时候请求还没用发送出去，可以在config里面加一些东西，如在请求头里面携带token，此时还没有到达服务器，error关联的是请求错误返回的信息。举个例子，当你发送请求的时候，这个时候网络被中断,请求还没有到达服务器，但是报错了，这个使用会走error，通常也会进行返回一个Promise对象。

响应拦截

axios.interceptors.response.use((config)=>{return config
},(error)=>{return Promise.reject(error)
})

解析:此时的请求已经到达了服务器，但是还没有到达客户端，可以对config进行一些操作，例如

进行一层结构的解析，返回return config.data，做一些统一错误处理,请求的时候只管成功,不管失败。error-------------它代表的是响应错误的返回值，如401，404，500的错误,权限不够,参数错误等一些列的错误：

代码

if(status===401){alert('权限不够')
}
else (status===404){alert('参数错误')
}
else{alert('其它错误')
}

token失效的处理

service.interceptors.response.use((response) => {// dosomething},(error) => {// ! 服务器响应失败时，干些事情： 导致响应失败的原因有很多，其中之一是 token 过期// 响应失败时的error(错误对象)，它经过了axios的2层包装，服务器响应的真实数据在 error.response.data 中。// axios包装的提示信息是：error.message，与服务器响应的真实数据是两回事const realData = error.response.data/* 处理token失效---后端处理 */if (error.response && realData && realData.code === 233333) {// 以上三个条件全部满足时，才说明token超时// 1. 触发actions中的logout函数，清除无效token、当前用户信息store.dispatch('user/logout')// 2. 跳转到登录页面router.push({ path: '/login' })// 3. return 一个执行错误，用于终止当前的promise执行链return Promise.reject(error)} else {/*  如果token未失效，则是其他错误 */// 1. 提示错误信息Message.error(realData.message)// 2. return 一个执行错误return Promise.reject(error)}}
)

view：

分析:

在请求拦截的时候此时请求还没有到达服务器。

在响应拦截的时候响应还没到达客户端。

axios请求拦截和响应拦截相关推荐

axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
axios的请求拦截和响应拦截
1.安装axios npm install axios --save 2.引入模块在untils文件夹中创建request.js文件,引入axios模块 import axios from &quo ...
axios拦截器（请求拦截和响应拦截）
axios拦截器分为request请求拦截器和response响应拦截器. request请求拦截器:发送请求前统一处理,如:设置请求头headers等. response响应拦截器:有时候我们要根据 ...
vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...
vue请求拦截器响应拦截器
import axios from "axios"; // 创建一个axios的appconst request = axios.create({baseURL:'http://1 ...
axios请求封装（带拦截器）
请求封装二(带拦截器) //请求 import service from '../utils/requst' export function hlserver(){return new Promise ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
axios拦截器_请求拦截器_响应拦截器---axios工作笔记010
然后我们再去看看axios的,请求拦截器,和响应拦截器. 先说一下这个,拦截器的原理,其实就是我们发送一个请求,这个请求在发出去之前,我们的请求拦截器,先去拦截一下,拦截的时候可以对请求数据做一些处 ...

axios请求拦截和响应拦截