1. 程式人生 > 實用技巧 >axios攔截請求,嚮應攔截

axios攔截請求,嚮應攔截

最近在專案中要用到攔截器,攔截每一次你的請求和響應,然後進行相應的處理。比如一些網站過了一定的時間不進行操作,就會退出登入讓你重新登陸頁面,在這期間是token神門的驗證過期了,也可以理解為身份登入過期了。
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'
  }
})


編輯請求攔截
instance.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 攔截器
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