Axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

<template>
  <div class="axios"></div>
</template>

拦截器：在请求或响应被处理前拦截它们
分为：请求拦截器，响应拦截器

<script>
import axios from 'axios'

export default {
  name: 'axios3-3',
  created() {
    // 请求拦截器
    axios.interceptors.request.use(config => {  // 在发送请求前做些什么
      return config
    }, err => { // 在请求错误的时候做些什么
      return Promise.reject(err)
    })

    // 响应拦截器
    axios.interceptors.response.use(res => {  // 请求成功对响应数据做处理
      return res
    }, err => { // 响应错误做些什么
      return Promise.reject(err)
    })

    // 取消拦截器（了解即可）
    const myInterceptor = axios.interceptors.request.use(config => { // 声明变量myInterceptor，把拦截器存放在变量myInterceptor中
      config.headers = {
        auth: true
      }
      return config
    })
    axios.interceptors.request.eject(myInterceptor) // 取消拦截器

    // 例子1  登录状态（token:''） 需要登录的接口
    const instance = axios.create({}) // 自定义 axios 实例添加拦截器
    instance.interceptors.request.use(config => { // 在发送请求前赋值token
      config.headers.token = ''
      return config
    })
    // 不需要登录的接口
    const newInstance = axios.create({})

    // 例子2  移动端开发
    const instance_phone = axios.create({})
    instance_phone.interceptors.request.use(config => { // 在发送请求前显示#modal弹框
      $('#modal').show()
      return config
    })
    instance_phone.interceptors.response.use(res => { // 请求成功隐藏#modal弹框
      $('#modal').hide()
      return res
    })
  },
}
</script>

如果你想在稍后移除拦截器，可以这样：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/})