Vue中使用Axios拦截器

1.封装使用

https://blog.youkuaiyun.com/bamboozjy/article/details/81364290

https://blog.youkuaiyun.com/qq_35775675/article/details/89331291

 

import axios from 'axios'
import {Indicator, Toast} from 'mint-ui'

const baseURL = '/pathName'
// const baseURL = '/self-weighing-api'

axios.defaults.baseURL = baseURL

// 请求前加上Loading
axios.interceptors.request.use(config => {
  Indicator.open()
  return config
}, err => {
  Indicator.close()
  Toast('网络请求出错')
  return Promise.reject(err)
})

// 添加axios拦截器
axios.interceptors.response.use(response => {
  Indicator.close()
  return response
}, error => {
  Indicator.close()
  if (error.response) {
    switch (error.response.status) {
      case 401:
        Toast('获取不到用户信息')
        break
      default:
        Toast('服务器出现错误')
    }
  }
  return Promise.reject(error)
})

export default axios
 

2.注意点

   1.在vue-router中created的钩子函数是不会触发axios的response拦截器的，这里做个笔记，避免再次踩坑。

   2.axios的实例拦截器配置不会继承axios全局的拦截器，也就是说axios的instance的拦截器配置时单独服务的，不会被全局拦截器影响。