什么是axios拦截器？有哪些作用和使用场景

axios拦截器

拦截器介绍

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

请求拦截器在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；
响应拦截器同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

比如一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器

应用场景：
1：每个请求都带上的参数，比如token，时间戳等。
2：对返回的状态进行判断，比如token是否过期

axios的拦截器作用非常大。axios的拦截器分为请求拦截器跟响应拦截器，都是可以设置多个请求或者响应拦截。每个拦截器都可以设置两个拦截函数，一个为成功拦截，一个为失败拦截。在调用axios.request()之后，请求的配置会先进入请求拦截器中，正常可以一直执行成功拦截函数，如果有异常会进入失败拦截函数，并不会发起请求；调起请求响应返回后，会根据响应信息进入响应成功拦截函数或者响应失败拦截函数。

因此，我们可以在拦截器中处理一些请求的统一处理。比如在请求拦截器中设置请求头，处理统一的请求数据，在响应拦截去中根据响应状态码做统一的提示信息，整理响应数据等。

在请求或响应被 then 或 catch 处理前拦截它们。

// 官方用例
// 1.添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});

// 2.添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});

1.axios-请求拦截器

目标

什么是请求
什么是axios的请求拦截器

场景

在发起请求之前, 最后对要发送的请求配置对象进行修改

例如: 如果本地有token, 携带在请求头给后台

// 添加请求拦截器--代码实现案例：仅供参考
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么, 如果vuex里有token携带在请求头中if (store.state.token.length > 0 && config.headers.Authorization === undefined) {// 发起请求之前, 把token携带在请求头上(表明自己身份)config.headers.Authorization = 'Bearer ' + store.state.token}return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error)
})

所有api接口里以后暂时不用自己携带Headers+Token了,简略代码，统一管理

小结

请求拦截器时候时候执行?
- 在发起请求最后一刻执行

2.axios-响应拦截器

目标

什么是响应
什么是axios的响应拦截器

场景

在响应回来后, 马上执行响应拦截器函数

例如: 判断是否错误401, 统一进行权限判断

// 添加响应拦截器--代码实现案例：仅供参考
axios.interceptors.response.use(function (response) { // 当状态码为2xx/3xx开头的进这里// 对响应数据做点什么return response
}, async function (error) { // 响应状态码4xx/5xx进这里// 对响应错误做点什么if (error.response.status === 401) { // 身份过期/token无效//  1.清空vuex的token store.commit('setToken', '')store.commit('setRefreshToken', '')// 2. 清空本地token localStorage.removeItem('token')localStorage.removeItem('refresh_token')//  跳转到登录页面登录router.push({path: '/login'})}     return Promise.reject(error)
})

小结

响应拦截器什么时候执行?
- 在响应回来以后
什么时候进响应拦截器成功, 什么时候进失败?
- 2xx/3xx开头的响应状态码进入成功
- 4xx/5xx开头的响应状态码进入失败