vue - axios 請求統一增加請求頭

每個請求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，

1.安裝axios :npm i axios

2.在main.js 里注冊

 

import axios from 'axios';

 

Vue.prototype.$axios = axios;

 

3.實現

 

let pending = []; //聲明一個數組用於存儲每個ajax請求的取消函數和ajax標識
let cancelToken = axios.CancelToken;
let removePending = (config) => {
  for(let p in pending){
    if(pending[p].u === config.url + '&' + config.method) { //當前請求在數組中存在時執行函數體
      pending[p].f(); //執行取消操作
      pending.splice(p, 1); //把這條記錄從數組中移除
    }
  }
}

// ajax請求統一增加請求頭
axios.interceptors.request.use(config => {
    config.headers.common = {
      'Content-Type': "application/x-www-form-urlencoded",
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Headers':'X-Requested-With,Content-Type',
      'Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS',
      'x-authentication-token': localStorage.XMDADMINTOKEN==undefined?'':localStorage.XMDADMINTOKEN
    }
    //config.timeout = 3600*24*7;
    config.timeout = 10000;
     // let token=localStorage.XMDADMINTOKEN;
     // console.log(token);

    let str_data = JSON.stringify(config.data || '{}');
    // 參數中攜帶cancelHttp，不防止多次請求
    if (str_data.indexOf("cancelHttp") > -1) {
      httpFlag = false
    }else {
      removePending(config); //在一個ajax發送前執行一下取消操作
      config.cancelToken = new cancelToken((c)=>{
        // 這里的ajax標識我是用請求地址&請求方式拼接的字符串，當然你可以選擇其他的一些方式
        pending.push({ u: config.url + '&' + config.method, f: c });
      });
    }
    return config
  },
  err => {
    return null
  })

// 是否防止多次請求
let httpFlag = true
// 攔截響應response，並做一些錯誤處理
axios.interceptors.response.use((response) => {
  // const data = response.data;
  // console.log(data);
  if (httpFlag) {
    removePending(response.config);  //在一個ajax響應后再執行一下取消操作，把已經完成的請求從pending中移除
  }

  //return data;
  return response;
}, (err) => {
  // 這里是返回狀態碼不為200時候的錯誤處理
  if (err.toString().indexOf("timeout") != -1) {
    Toast({
      message: '請求超時，請稍后再試'
    });
  }
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '請求錯誤'
        break

      case 401:
        localStorage.XMDADMINTOKEN="";
        err.message = '未授權，請登錄';
        router.push({path: '/Login'});

        break

      case 403:
        err.message = '拒絕訪問'
        break

      case 404:
        err.message = `請求地址出錯: ${err.response.config.url}`
        break
      case 405:
        err.message = `請求地址出錯:`
        break
      case 408:
        err.message = '請求超時'
        break

      case 500:
        err.message = '網絡錯誤，請稍后再試'
        break

      case 501:
        err.message = '網絡錯誤，請稍后再試'
        break

      case 502:
        err.message = '網絡錯誤，請稍后再試'
        break

      case 503:
        err.message = '網絡錯誤，請稍后再試'
        break

      case 504:
        err.message = '網絡錯誤，請稍后再試'
        break

      case 505:
        err.message = 'HTTP版本不受支持'
        break

      default:
    }
    if (err.response.data.msg) {
      err.message = err.response.data.msg;
    }
    Toast({
      message: err.message
    });
  }
  return Promise.reject(err)
})