axios 攔截器

這是我參與更文挑戰的第5天，活動詳情查看： 更文挑戰

攔截器分爲 request請求攔截器 和 response響應攔截器，建立 axios 實例後，可配置請求攔截器

axios 基礎使用及配置

請求攔截

在請求發送前統一執行某些操做，經常使用在請求頭中處理token等

var instance = axios.create({
  timeout: 60000,
  withCredentials: true
})
// 請求攔截器
instance.interceptors.request.use(function (config){
    // 在發送請求以前能夠作一些事情
     config.headers.token = 'token'   //在headers中攜帶token
     return config
}，function (error){
    // 處理請求錯誤
    return Promise.reject(error)
})
複製代碼

token 等 headers 信息處理也能夠在 axios 實例建立後全局處理，大部分 api 的攜帶信息應該不會再改了

instance.defaults.headers.common["token"] = getCookie("accessToken")
instance.defaults.headers.common["SID"] = '3f25944323'
instance.defaults.headers.common["action"] = 'Server'
複製代碼

除了 common 以外還有其餘方法，這裏一塊兒列出來，方便後續須要處理時使用

instance.defaults.headers.common["token"] = "Token"
instance.defaults.headers.get[CSRFToken'] = "Token"
instance.defaults.headers.put['CSRFToken'] = "Token"
instance.defaults.headers.delete['CSRFToken'] = "Token"
instance.defaults.headers.patch['CSRFToken'] = "Token"
複製代碼

響應攔截

在接收到服務器響應後統一執行某些操做，經常使用的是對各種狀態碼作統一處理

// 響應攔截器
instance.interceptors.response.use(
  // 請求成功業務處理
  response => {
    //攔截響應，作統一處理 
    if (response.status === 200 && response.data.request_id) {
      // 與後端協定好對應需求的返回值code，這裏進行響應前處理
      if (response.data.code == 0) {
        return response.data;
      } else if (response.data.code == 1) {
        // 未登陸
        window.location.href = LOGIN_URL
      } else if (response.data.code == 2) {
        // 無權限
        router.push({ path: '/unauthorized' })
      } else if (response.data.code == 4) {
        // 未開通
        router.push({ path: '/buy' })
        return response.data;
      } else {
        // 錯誤信息
        let msg = response.data.msg
        Message.error({
          message: msg,
          duration: 3000,
          center: true,
          offset: 50,
          showClose: true
        })
        return Promise.reject(error)
      }
    }
    return response
  },
  //接口錯誤狀態處理，接口未能正常返回數據的狀況
  error => {
    // 對經常使用的錯誤狀態碼攔截處理，也可與後端協商特殊錯誤碼
    if (error.response.status === 500) {
      Message.error({
        message: '服務器內部錯誤',
        duration: 3000,
        center: true,
        offset: 50,
        showClose: true
      })
      router.push({ path: '/errorpage' })
      return Promise.reject(error)
    }
    if (error.response.status === 404) {
      router.push({ path: "/undefined" })
      return Promise.reject(error)
    }
    if (error.response.status === 403) {
      store.dispatch("app/setServerError", "403")
      removeCookie("csrftoken")
      removeCookie("sessionid")
      router.push({ path: "/errorpage" })
      return Promise.reject(error)
    }
    if (error.response.status === 422) {
      // let msg= error.response.data.msg
      // 翻譯後端返回的錯誤信息
      let msg = window.rootVueInstance.$i18n.t('Error.' + error.response.data.msg)
      Message.error({
        message: msg,
        duration: 3000,
        center: true,
        offset: 50,
        showClose: true
      })
      return Promise.reject(error)
    }
    if (error.response.status === 409) {
      let msg409 = '獲取列表失敗，請檢查AK信息是否正確'
      return Promise.reject(error)
    }
    // ...
    return Promise.reject(error.response.status)
  })
複製代碼

導出實例

export default instance
複製代碼

axios 攔截器就配置好啦 ~