1. 程式人生 > 實用技巧 >axios的攔截器

axios的攔截器

在scr目錄下的api目錄建立一個JS檔案
import axios from 'axios'  //引入axios
//下面這兩個不一定需要引入,看你專案需要攔截的時候做什麼操作,但是一般都需要引入store
import store from '@/store/index'  //引入store
import router from '@/router'  //引入router
建立一個axios例項
let axios= axios.create({
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})
請求攔截器 這個攔截器會在你傳送請求之前執行
我的這個請求攔截器的功能是為我每一次請求去判斷是否有token,如果token存在則在請求頭加上這個token。後臺會判斷我這個token是否過期
// http request 攔截器
axios.interceptors.request.use(
   // 在傳送請求之前做些什麼
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判斷是否存在token,如果存在的話,則每個http header都加上token
      config.headers.authorization = token  //
請求頭加上token } return config }, err => { return Promise.reject(err) })

響應攔截器
// http response 攔截器
axios.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) // 返回介面返回的錯誤資訊 })
在需要的頁面匯入就可以使用了
import instance from './axios'

/* 驗證登陸 */
export function handleLogin (data) {
  return axios.post('/ds/user/login', data)
}

攔截器