正常情况下打开浏览器前端页面向后端发起请求使用的是axios，无论是原生的axios还是自己封装的axios都看成是axios。发起请求之后后端去数据库里面拿数据，然后返回给前端。
发起请求的地方是axios，并且你能够封装这个axios，那么你就可以添加拦截器。
请求拦截器就是你在发起请求的时候应该做什么事情，响应拦截器就是你在接收到这个请求之后应该去干什么。
拦截器可以拦截每一次请求和响应，然后进行相应的处理。
- 请求拦截应用场景： 发起请求前添加header
使用最多的场景就是前端调用后端，后端是有鉴权逻辑的，前端需要添加一个token。前端在登入的时候就应该获取这个token了，这个token加到url的参数之内。
响应拦截应用场景：
- 统一处理API响应状态码200或非200的提示消息，拿到业务的状态码。做一些自定义的响应配置
- 统一处理catch异常提示信息
主要去处理响应是否成功，拿到返回业务状态码的逻辑，这个时候其实是自定义的响应，到底业务有没有成功，这决定了你的前端展示。
这些都是优先于你的axios.get()/post()去执行的，不管是在get/post发起请求之前还是获得响应之后，你得先经过拦截器！！！不然封装也没多大的意义。
import axios from "axios"
const axios_instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//请求之前要去干什么
//添加请求拦截器,固定写法，config是接受参数，可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
config => {
//在请求之前做的事情，比如添加请求头
config.headers['Test-header'] = 'zhangsan'
return config
},
error=>{
//请求发生了error，处理请求错误
//axios是基于ajax和promise封装的
//Promise.reject代表在使用instance发起请求的时候，失败了在catch语句中可以获取
//.then .catch .finally都是promise提供的能力
return Promise.reject(error)
}
)
文章来源：https://www.toymoban.com/news/detail-765297.html
响应拦截器文章来源地址https://www.toymoban.com/news/detail-765297.html
import axios from "axios"
const axios_instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//请求之前要去干什么
//添加请求拦截器,固定写法，config是接受参数，可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
config => {
//在请求之前做的事情，比如添加请求头
config.headers['Test-header'] = 'zhangsan'
return config
},
error=>{
//请求发生了error，处理请求错误
//axios是基于ajax和promise封装的
//Promise.reject代表在使用instance发起请求的时候，失败了在catch语句中可以获取
//.then .catch .finally都是promise提供的能力
return Promise.reject(error)
}
)
//添加响应拦截器，响应之后需要干什么
//先在这里处理，最后到你的.vue组件当中的.then().catch().finally()中处理
//要先经过这个地方
axios_instance.interceptors.response.use(
response =>{
//响应接收后做的事情，在.then .catch接受之前
//业务层的报错
if(response.data.code != 200){
alert('数据请求失败')
return Promise.reject(response)
}
return response
},
error =>{
//状态码非200范围内
return Promise.reject(error)
}
)
export default axios_instance到了这里，关于Vue axios 拦截器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
