关于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

有帮助的话 ，别忘了下面的心心点你一下（想知道更多关于知识请私信我哦）

如有不懂或解决不了的问题可以私信我，或者在下方评论 ，小陈帮你解决困难