原文地址：https://www.jeremyjone.com/610/ ，轉載請註明。
之前項目是用到了axios，它本身是對ajax的二次封裝。不過我們在使用的時候經常是對axios再進行二次封裝，從而達到我們需要的效果。現在把代碼整理了一下，貼上來。
首先，安裝axios：
npm install axios
還有一個qs是格式化參數用的，如果不需要，可以不用，直接拼接也可以。
/*
* @Author: JeremyJone
* @Date: 2020-03-03 17:58:23
* @LastEditors : JeremyJone
* @LastEditTime : 2020-03-03 19:33:56
* @Description: axios封裝示例，含詳細註釋，僅用於學習使用。
*/
// 引入axios
import axios from "axios";
// 格式化數據的第三方庫
import qs from "qs";
/**
* 環境的配置，區分生產環境和開發環境
*/
switch (process.env.NODE_ENV) {
case "production":
// 生產環境，部署到的服務器
// baseURL配置基地址，配置之後就不需要在每個接口填寫完整路徑
axios.defaults.baseURL = "http://生產真實地址";
break;
case "test":
axios.defaults.baseURL = "http://測試環境";
break;
default:
axios.defaults.baseURL = "http://開發環境";
break;
}
/**
* 設置超時時間，單位毫秒
*/
axios.defaults.timeout = 50000;
/**
* 設置是否允許跨域和是否允許攜帶憑證，如果該設置爲false，請求時不允許攜帶憑證
*/
axios.defaults.withCredentials = true;
/**
* 設置請求頭
* - 設置請求傳遞數據的格式，通常需要包含 `x-www-form-urlencoded` 格式，該格式的數據通常爲 `xxx=xxx&yyy=yyy`，這是爲了post請求與get請求的格式相同
*/
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
// 針對post請求設置數據格式，該方法transformRequest僅針對post請求有效
// 使用qs庫將傳入的data數據轉換爲 `x-www-form-urlencoded` 格式
// 當然，這需要看服務器使用什麼數據格式，如果服務器使用json，那麼不需要這樣設置
axios.defaults.transformRequest = data => qs.stringify(data);
/**
* 設置請求攔截器。它的執行邏輯：
* 客戶端的請求 -> 請求攔截器 -> 服務器
* 這樣可以對請求操作進行一系列的處理，再發送給服務器，比如，添加TOKEN
*/
axios.interceptors.request.use(
config => {
// 攜帶token，從本地讀取到token，然後添加到請求頭
const token = localStorage.getItem("token");
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.reject(error);
}
);
/**
* 自定義響應成功的HTTP狀態碼
* 通常情況下不需要，因爲開發的程序一般不會出現3開頭的狀態碼
* 如果需要，可以打開註釋
*/
// axios.defaults.validateStatus = status => {
// return /^(2|3)\d{2}$/.test(status);
// };
/**
* 響應攔截器。它的知性邏輯：
* 服務器返回信息 -> 相應攔截器 -> 客戶端獲取到信息
* 這樣可以首先對響應的信息做一些預處理，從而使得客戶端的代碼更加整潔
*/
axios.interceptors.response.use(
response => {
// 成功後返回response的主體，其他數據一般並不需要，這樣在使用中只需要關注數據主體就可以
return response.data;
},
error => {
let { response } = error; // 等效於error.response
if (response) {
// 服務器返回了結果
// 這裏能夠讀出服務器返回的錯誤HTTP狀態碼，根據不同狀態碼進行不同處理
// 這個根據業務需求操作即可
switch (response.status) {
case 401:
// 權限不夠，一般是未登錄
// ...
break;
case 403:
// 服務器已經接受，但是拒絕訪問，通常是登錄過期
// ...
localStorage.removeItem("token");
break;
case 404:
// 找不到資源
// ...
break;
}
} else {
// 服務器根本就沒有返回任何東西
// 這裏一般只有兩種情況，服務器崩潰，客戶端沒有網。
// 通常在這裏做斷網處理
if (!window.navigator.onLine) {
// 處理斷網
// ...
return;
}
// 什麼都不是，返回一個錯誤
return Promise.reject(error);
}
}
);
// 都寫好，最後將axios導出
export default axios;
然後，將axios添加到自己的項目中，比如在Vue中：
Vue.prototype.$http = axios;
然後，在任何一個Vue的組件中，都可以直接使用this.$http的get或post等方法來調用這個axios。