axios 请求拦截器和响应拦截器
最编程
2024-03-27 15:29:17
...
一、 拦截器介绍
一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。
- 请求拦截器
在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装; - 响应拦截器
同理,响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效等。
二、 Axios实例
- 创建axios实例
// 引入axios
import axios from 'axios'
// 创建实例
let instance = axios.create({
baseURL: 'xxxxxxxxxx',
timeout: 15000 // 毫秒
})
- baseURL设置:
let baseURL;
if(process.env.NODE_ENV === 'development') {
baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
baseURL = 'xxx生产环境xxx';
}
// 实例
let instance = axios.create({
baseURL: baseURL,
...
})
- 修改实例配置的三种方式
// 第一种:局限性比较大
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'xxxxx';
// 第二种:实例配置
let instance = axios.create({
baseURL: 'xxxxx',
timeout: 1000, // 超时,401
})
// 创建完后修改
instance.defaults.timeout = 3000
// 第三种:发起请求时修改配置、
instance.get('/xxx',{
timeout: 5000
})
这三种修改配置方法的优先级如下:请求配置 > 实例配置 > 全局配置
三、 配置拦截器
// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});
- 请求拦截器
// use(两个参数)
axios.interceptors.request.use(req => {
// 在发送请求前要做的事儿
...
return req
}, err => {
// 在请求错误时要做的事儿
...
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
})
- 响应拦截器
// use(两个参数)
axios.interceptors.reponse.use(res => {
// 请求成功对响应数据做处理
...
// 该返回的数据则是axios.then(res)中接收的数据
return res
}, err => {
// 在请求错误时要做的事儿
...
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
})
- 常见错误码处理(error)
axios请求错误时,可在catch里进行错误处理。
axios.get().then().catch(err => {
// 错误处理
})
四、 axios请求拦截器的案例
// 设置请求拦截器
axios.interceptors.request.use(
config => {
// console.log(config) // 该处可以将config打印出来看一下,该部分将发送给后端(server端)
config.headers.Authorization = store.state.token
return config // 对config处理完后返回,下一步将向后端发送请求
},
error => { // 当发生错误时,执行该部分代码
// console.log(error) // 调试用
return Promise.reject(error)
}
)
// 定义响应拦截器 -->token值无效时,清空token,并强制跳转登录页
axios.interceptors.response.use(function (response) {
// 响应状态码为 2xx 时触发成功的回调,形参中的 response 是“成功的结果”
return response
}, function (error) {
// console.log(error)
// 响应状态码不是 2xx 时触发失败的回调,形参中的 error 是“失败的结果”
if (error.response.status === 401) {
// 无效的 token
// 把 Vuex 中的 token 重置为空,并跳转到登录页面
// 1.清空token
store.commit('updateToken', '')
// 2.跳转登录页
router.push('/login')
}
return Promise.reject(error)
})
上一篇: vue 回调参数添加额外参数
下一篇: 精密移相电路设计实例
推荐阅读
-
SpringBoot 使用 ResponseBodyAdvice 和 RequestBodyAdvice 实现请求体解密、响应体加密 - II,实现细节
-
SpringMVC02]返回值 ModelAndView、ajax 请求返回 json、全局异常处理、拦截器
-
# 在 vue3 中监听由 axios 发起的发布请求,显示响应数据百分比进度条
-
Flume 拦截器概念和自定义拦截器的使用 - 拦截器的作用
-
了解并使用 axios axios.create(axios 请求的二级封装) 拦截器 取消请求(axios.CancelToken)
-
vue 项目中两种请求方法(axios 和 vueResource)的简要说明
-
axios 请求拦截器和响应拦截器
-
趣谈留言队列,搞清楚留言队列到底是什么!-说到消息队列,洪觉大概能猜到人们听到消息队列的反应,大致可以分为以下几类人。 第一类人,懵懵懂懂,刚上大学接触编程,还没用过消息队列,甚至还以为消息队列就是代码里面要新建一个List之类的;第二类人,听过消息队列,了解消息队列,但具体是什么还不是太明白,只知道一说到消息队列,脑海里马上出现了三组词,削峰、异步、解耦;第三类人,用过消息队列,对它有一定了解,但不知道为什么要这样设计,消息队列有什么样的前世今生,是如何演化到现在的模式的?**第四类人,已经对消息队列有了足够的了解,可以阅读本帖作为复习和温习。**你属于哪一类?无论你对消息队列了解多少,读完这篇文章后,我相信你都会有所收获。 什么是消息队列?我们为什么要使用消息队列?真的只是因为它看起来很勉强、很常用吗?当然不是,一项技术的出现往往是为了解决某种痛点,我们就从这个痛点出发,看看消息队列到底是为了解决什么问题而诞生的。 相信大家在工作之前,或者工作中接触单片机的次数会多一点,不管什么业务都一股脑塞进一个系统里,这种情况下接触消息队列的场景会比较少。但随着业务的增长,量上去了,单机系统就很难维护了,也扛不住并发量的增长,就需要把原来的单体应用拆分成多个服务。例如,牛奇网采用分布式架构,将原来的单体系统拆分成用户服务、题库服务、求职服务、论坛服务等,每个分布式节点都有一个集群,保证高可用性。 那虽然在这样的微服务架构下,如果某个核心业务并发量过大,系统就扛不住了。比如淘宝、淘票票、拼多多、京东等电商场景中的支付场景,你在某宝下单并支付后,调用支付服务,完成支付后,还需要更新订单的状态,这个时候就需要调用订单服务,那我们平时也下单,除了简单完成这些操作外,还会给你相应的积分;商家也会收到订单消息,并给您发送旺旺消息,确认订单无误;同时,也会给您发送消息,确认订单无误。确认订单无误;同时您还可以查看您的物流状态;还有系统为了给您推荐更适合您的商品,会根据您的订单做类似的推荐等等,我说的这些都是当我们下单后,肉眼可以感知到系统所做的动作。 **一个支付动作如果还需要调用那么多服务,等他们响应成功,最后再告诉用户你支付成功了,用户在系统中的整个体验会非常糟糕。**设想一下,假设请求服务+处理请求+响应总共需要 50ms,我们上面列出的场景:支付服务、订单服务、积分服务、商家服务、物流服务、推荐服务,总共需要 300ms。
-
使用 Redis、拦截器和自定义注解实现接口闲置的 SpringBoot
-
计算机网络套接字编程实验 侦听和接受函数:让套接字进入侦听状态并响应客户端请求 - 侦听函数