axios请求响应拦截器的应用
什么是axios拦截器?
一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。
请求拦截器在请求发送前进行必要操作处理
例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
响应拦戴器同理,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等.也常用来判断登录失败等。
比如一些网站过了一定的时间不进行操作,就会退出登录让你重新登陆页面,
当然这不用拦截器你或许也可以完成这功能,但是会很麻烦而且代码会产生大量重复,所以我们需要用到拦截器
应用场景:
每个请求都带上的参数,比如token,时间戳等。
对返回的状态进行判断,比如token是否过期
axios的拦截器作用:
axios的拦截器分为请求拦截器跟响应拦截器,都是可以设置多个请求或者响应拦截。
每个拦截器都可以设置两个拦截函数,一个为成功拦截,一个为失败拦截。
在调用axios.request()之后,请求的配置会先进入请求拦截器中,正常可以一直执行成功拦截函数,如果有异常会进入失败拦截函数,并不会发起请求;
请求响应返回后,会根据响应信息进入响应成功拦截函数或者响应失败拦截函数。
因此,我们可以在拦截器中统一处理一些请求。
比如在请求拦截器中设置请求头,处理统一的请求数据,在响应拦截去中根据响应状态码做统一的提示信息,整理响应数据等。
在请求或响应被then 或 catch处理前拦截它们。
拦截器案例:
// 设置请求拦截器
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)
})
参考:
https://wenku.baidu.com/view/5ef451c9adaad1f34693daef5ef7ba0d4a736d1f.html
http://www.axios-js.com/zh-cn/docs/#Node-js
https://juejin.cn/post/7100470316857557006
axios请求响应拦截器的应用的更多相关文章
- vue axios请求/响应拦截器
// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...
- 【转】AngularJs HTTP请求响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- Vue-admin工作整理(十六):Ajax-axios进行请求封装+拦截器
典型的工具类封装,增加拦截起来做相应的处理 user.js: import axios from './index' export const getUserInfo = ({ userId }) = ...
- axios封装的拦截器的应用
axios拦截器 页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...
- 快速了解AngularJs HTTP响应拦截器
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
- [代码笔记]VUE路由根据返回状态判断添加响应拦截器
//返回状态判断(添加响应拦截器) Axios.interceptors.response.use( res => { //对响应数据做些事 if (res.data && !r ...
随机推荐
- 《原CSharp》第二回 巧习得元素分类 子不知怀璧其罪
第二回 巧习得元素分类 子不知怀璧其罪 ===================================================================== 云溪父亲见状看了看云 ...
- Prometheus安装教程
Prometheus安装教程 欢迎关注H寻梦人公众号 参考目录 docker安装Prometheus 基于docker 搭建Prometheus+Grafana prometheus官方文档 dock ...
- 深入理解 happens-before 原则
在前面的文章中,我们深入了解了 Java 内存模型,知道了 Java 内存模型诞生的意义,以及其要解决的问题.最终我们知道:Java 内存模型就是定义了 8 个基本操作以及 8 个规则,只要遵守这些规 ...
- 单片机 MCU 固件打包脚本软件
1 前言 开发完 MCU 软件后,通常都会生成 hex 文件或者 bin 文件,用来做固件烧录或者升级,如果用来做产品开发,就涉及到固件版本的问题,初学者通常采用固件文件重命名来区分版本. 如果需 ...
- [LINUX] 像电影里的黑客一样用 terminal 作为日常开发
目录 1.效果预览 2.具体实现 2.1 定位鼠标位置 2.2 获取屏幕位置 2.3 计算鼠标在哪个窗口 2.4 1920x1080 平铺效果设计 2.5 1280x1024 平铺效果设计 3 代码 ...
- 准备java编程软件与第一个java程序
我们要用的java的编程软件叫做:eclipse windows上安装eclipse 首先需要一个浏览器 要下载eclipse最简单的方式就是在官网下载 官网:https://www.eclipse ...
- mongodb 数据块迁移的源码分析
1. 简介 上一篇我们聊到了mongodb数据块的基本概念,和数据块迁移的主要流程,这篇文章我们聊聊源码实现部分. 2. 迁移序列图 数据块迁移的请求是从配置服务器(config server)发给( ...
- docker快速安装openvas
项目地址 1.更换国内docker源 2.docker run -d -p 443:443 -e PUBLIC_HOSTNAME=此处填你宿主机IP --name openvas mikesplain ...
- MySQL-过滤数据(WHERE语句)
1.使用WHERE子句 在SELECT语句中,数据根据WHERE子句中指定的搜索条件进行过滤.WHERE子句在表名( FROM子句)之后给出,如下所示: SELECT prod_name,prod_p ...
- Trie 树总结
Trie,又经常叫前缀树,字典树等等.它有很多变种,如后缀树,Radix Tree/Trie,PATRICIA tree,以及bitwise版本的crit-bit tree.当然很多名字的意义其实有交 ...