axios二次封裝

import axios from 'axios'
import qs from 'qs'
import ErrorCode from './error'//封裝code錯誤時對應的提示
import router from '../router/index' //這裏的router 請找你對應的router
import {
  Message
} from 'element-ui';
const service = axios.create({
  baseURL: "http://localhost:3000", // 封裝請求地址的前綴
  timeout: 5000 // 超時時間
})

封裝請求頭

service.interceptors.request.use(config => {
    /**
     * 請求以前判斷token是否存在或者過時，若是過時直接跳轉到登錄頁面，再次獲取token，在這裏你還能夠作其餘判斷
     * **/
    if(!sessionStorage.getItem("token")) {
        router.push('/Login')
    }
    if (config.method === "post") {
      // 序列化,如果能直接接受json 格式,能夠不用 qs 來序列化的
      config.data = qs.stringify(config.data);
    }    
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: '加載超時'
    })
    return Promise.reject(error)
})

封裝響應

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //這裏約定後臺返回code爲200時爲正確的請求響應    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//這裏code不是200的時候顯示本身封裝的錯誤code提示
      })      
    }
        return response.data
    }, function (error) {
        // 對響應錯誤作點什麼
    return Promise.reject(error);
});

封裝post請求

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      let parms = {
        token:"4552565215"
      }
      service.post(url,Object.assign(parms,data))//能夠把你項目的必傳項又不會發生改變的例如token 封裝再這裏就不用每次寫token了
        .then(response => {
          resolve(response);
        }, err => {
          reject(err)
        })
        .catch(res => {
          console.log("超時處理",res)
        })
    })
  }

ErrorCode示例

const ErrorCode = {
    "100":"錯誤1",
    "101":"錯誤2",
    "102":"錯誤3",
    "103":"錯誤4",
    "104":"錯誤5",
}
export default ErrorCode

最後說說我理解的爲何要封裝axios

1.在請求攔截中先須要判斷一些必要的因素好比沒有token的話須要直接跳轉login頁面從新獲取。
2.默認前綴好比"http://baidu.com",而後上線以前使用本地的前綴，上線前改爲你的線上地址再打包，當讓這裏可使用webpack的配置來判斷開發環境和生產環境使用不一樣地址。這個就看你本身了
3.在響應攔截中能夠統一判斷返回的code顯示對應的錯誤信息。給用戶以提示，
4.在封裝對應的get或者post的時候把一些固定必傳的參數加上去，寫其餘請求時加上改請求的其餘參數就行了
5.超時的設置，以及超時後的一些處理，是從新請求仍是作其餘操做。
6.最後我能想到的也就這些，若有大佬路過能夠指正隨便加以指點，萬分感謝！