axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use（附示例代码）

1.请求拦截器（在请求之前进行一些配置）

axios.interceptors.request.use(function(config){
	//比如是否需要设置 token
	config.headers.token='wwwwwsdsdf'
	return config
})

2.响应了拦截器（在响应之后对数据进行一些处理）

axios.interceptors.response.use(res=>{
	let data=res.data
	//比如响应一些报错信息
	return data
})

3. 完整的应用实例

采自apiadmin项目src/libs/api.request.js

import config from '@/config'
import axios from 'axios'
import iView from 'view-design'
import { setToken, getToken } from '@/libs/util'
import router from '@/router'

export const baseUrl = (process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro) + 'admin/'

class HttpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }

  interceptors (instance) {
    // 请求拦截，这里其实可以去掉，没有任何的作用
    instance.interceptors.request.use(config => {
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      const { data, status } = res
      if (data.code < 0) {
        if (data.code === -14) {
          setToken('')
          router.push({ name: 'login' })
        } else {
          iView.Message.error(data.msg)
        }
        throw new Error(data.msg)
      } else {
        return { data, status }
      }
    }, error => {
      return Promise.reject(error)
    })
  }

  // 所有的请求点已经被重写了
  request (options) {
    const instance = axios.create()
    let apiAuth = getToken()
    if (apiAuth === false) {
      options = Object.assign({
        baseURL: this.baseUrl,
        headers: {}
      }, options)
    } else {
      options = Object.assign({
        baseURL: this.baseUrl,
        headers: {
          'Api-Auth': apiAuth
        }
      }, options)
    }
    this.interceptors(instance)
    return instance(options)
  }
}

const api_axios = new HttpRequest(baseUrl)
export default api_axios