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

2024-07-18 03:11| 来源: 网络整理| 查看: 265

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开头的响应状态码进入失败

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章