技術標籤：前端

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