关于axios的拦截器是一个作用非常大，非常好用的东西。分为请求拦截器和响应拦截器两种。
- 请求拦截器
- 响应拦截器
我一般把拦截器写在main.js里。
(Vue项目越做越多，Axios一直作为请求发送的基础工程，这里就深究一下Axios的拦截器相关的一些逻辑和对应一个比较恶心的场景。)
https：//jkchao.github.io/vue-loading/
效果展示图
1.作用
可以拦截每一条ajax请求，根据项目需求完成不同的针对
2.拦截点---一共有四个拦截点
（1）request
· success
· fail
（2）response
· success
· fail
3.vue-loading
（1）安装
npm install vue-loading-template --save
（2）实战：
first导入：
import {VueLoading} from 'vue-loading-template'
second: 定义使用 ：
<vue-loading class="loading" type="bubbles" v-show="isload"></vue-loading>
third：请求拦截器 ：
created() {
//请求拦截器
Axios.interceptors.response.use((response)=>{
// 回复前该做点什么
this.isload=false
return response
},error => {
//发生错误该做什么
return Promise.reject(error)
})
Axios.interceptors.request.use((config)=>{
// 回复前该做点什么
this.isload=true
return config
},error => {
//发生错误该做什么
return Promise.reject(error)
})
}
我一般写在跟组件（app.vue）中
注意：可以在vue-loading的type中更改动画效果的样式（如上图）
<template>
<div id="app">
<router-view/>
<vue-loading type='spiningDubbles' color='cornflowerblue' :size="{width:'1rem',height:'1rem'}" v-show="isload">
</vue-loading>
</div>
</template>
<script>
import axios from 'axios'
import { VueLoading } from 'vue-loading-template'
export default {
data(){
return{
isload:false,
}
},
components:{
VueLoading
},
created() {
//响应拦截器
axios.interceptors.response.use((response)=>{
// 回复前该做点什么
this.isload=false
return response
},error => {
//发生错误该做什么
return Promise.reject(error)
})
axios.interceptors.request.use((config)=>{
// 回复前该做点什么
this.isload=true
return config
},error => {
//发生错误该做什么
return Promise.reject(error)
switch(code){
case'400':
return status(400).json({
code:400,
err_message:'API拼写错误'
})
case'500':
return status(500).json({
code:500,
err_message:'服务器错误'
})
case'1001':
return status(1001).json({
code:1001,
err_message:'断网了'
})
//还可以写很多 此处省略
}
})
}
}
</script>
<style>
#app {
}
</style>
页面上就会出现这样的效果、
image.png
