>[success] # axios 封裝 [axios中文文檔|axios中文網 ](http://www.axios-js.com/zh-cn/docs/) * 注意下面封裝項目需要是 URLENCODED 格式才進行了transformRequest 攔截轉碼 ~~~ /* axios二次封裝：把每一次基于axios發送請求的公共部分進行提取 + axios.defaults.xxx + axios.interceptors.request/response 攔截器 */ import axios from 'axios'; import qs from 'qs'; const isPlainObject = function isPlainObject (obj) { let proto, Ctor; if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false; proto = Object.getPrototypeOf(obj); if (!proto) return true; Ctor = proto.hasOwnProperty('constructor') && proto.constructor; return typeof Ctor === "function" && Ctor === Object; }; // 請求URL地址沒有加前綴，則默認把BASE-URL加上；如果請求時候，自己設置前綴了，則以自己寫的為主； // 真實開發的時候，我們項目有各種不同的環境「開發、測試、灰度、生產」：我們需要針對不同的環境，有不同的BASE-URL // 1)在運行編譯的時候，設置環境變量 // + 安裝cross-env插件 $ npm i cross-env // + package.json的scripts中做處理 // 開發環境 serve:"cross-env NODE_ENV=development vue-cli-service serve", // 生產環境 build:"cross-env NODE_ENV=production vue-cli-service build" // 2)在代碼中獲取環境變量的值，根據不同值，設置不同的BASE-URL let env = process.env.NODE_ENV || 'development', baseURL = ''; switch (env) { case 'development': baseURL = 'http://127.0.0.1:9999'; break; case 'production': baseURL = 'http://api'; break; } axios.defaults.baseURL = baseURL; // 一些可以提取的小東西:超時時間 & CORS跨域中是否允許攜帶資源憑證(例如:cookie) // + 客戶端的withCredentials:true，那么服務器端也要設置為允許 axios.defaults.timeout = 10000; axios.defaults.withCredentials = true; // POST系列請求中:請求主體中傳遞給服務器的信息，項目要求需要是URLENCODED格式；當代瀏覽器中，我們請求主體傳遞給服務器的格式是啥，瀏覽器會自動在請求頭中，更新Content-Type! axios.defaults.transformRequest = data => { // 只有我們寫的DATA是一個純粹的對象，才需要按需求處理 if (isPlainObject(data)) data = qs.stringify(data); return data; }; // 自己規定，服務器返回的狀態碼，值是多少算是請求成功 // 成功:服務器正常返回響應信息，且返回的HTTP狀態碼是經過validateStatus校驗通過的 // 失敗: // + 服務器有返回的信息，但是返回的HTTP狀態碼并沒有經過validateStatus的校驗 // + 請求超時或者請求中斷 reason.code==='ECONNABORTED' // + 服務器沒有返回任何信息「可能是斷網了」 // + ... axios.defaults.validateStatus = status => { return status >= 200 && status < 400; }; // 請求攔截器:在axios內部已經把config的那些配置項處理差不多了，并且打算按照配置項，向服務器發送請求之前進行攔截；攔截目的是把配置項中的一些信息再改改！ axios.interceptors.request.use(config => { // 常見需求：在每一次發送請求的時候，通過請求頭把token信息傳遞給服務器 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } return config; }); // 響應攔截器:onfulfilled/onrejected，發生在請求成功/失敗，在業務層具體.then/catch之前進行攔截處理 axios.interceptors.response.use(response => { // 請求成功:一般我們會返回響應主體信息 return response.data; }, reason => { // 請求失敗:一般我們會做統一的錯誤提示 if (reason && reason.response) { let response = reason.response; // 有響應信息，但是狀態碼不對，我們根據不同的狀態碼做不同的提示 switch (response.status) { case 400: // ... break; case 401: // ... break; case 404: // ... break; } } else { if (reason && reason.code === 'ECONNABORTED') { // 請求超時或者中斷 } if (!navigator.onLine) { // 斷網了 } } return Promise.reject(reason); }); export default axios; ~~~