axios攔截器

最近在項目中要用到攔截器，坦白說是第一次據說這玩意，因此資料查了很久，如今也算是明白了攔截器的做用。個人理解就是攔截每一次你的請求和響應，而後進行相應的處理。好比一些網站過了必定的時間不進行操做，就會退出登陸讓你從新登錄頁面，每次請求帶上token之類的功能

在src目錄下的api目錄建立一個js文件

import axios from 'axios'  //引入axios
//下面這兩個不必定須要引入，看你項目須要攔截的時候作什麼操做，可是通常都須要引入store
import store from '@/store/index'  //引入store
import router from '@/router'  //引入router
複製代碼

建立一個axios實例

let instance = axios.create({
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})
複製代碼

編寫請求攔截器

這個攔截器會在你發送請求以前運行 個人這個請求攔截器的功能是爲我每一次請求去判斷是否有token，若是token存在則在請求頭加上這個token。後臺會判斷我這個token是否過時。

// http request 攔截器
instance.interceptors.request.use(
  config => {
    if (store.state.token) { // 判斷是否存在token，若是存在的話，則每一個http header都加上token
      config.headers.authorization = store.state.token  //請求頭加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })
複製代碼

響應攔截器

// http response 攔截器
instance.interceptors.response.use(
  response => {
    //攔截響應，作統一處理 
    if (response.data.code) {
      switch (response.data.code) {
        case 1002:
          store.state.isLogin = false
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
  },
  //接口錯誤狀態處理，也就是說無響應時的處理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的錯誤信息
  })
複製代碼

最後把實例導出就好了

export default instance
複製代碼

在須要的頁面導入就可使用了

import instance from './axios'

/* 驗證登錄 */
export function handleLogin (data) {
  return instance.post('/ds/user/login', data)
}
複製代碼