Vue Axios 封裝
定義
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特性
-
支持Promise API
-
攔截請求和響應
-
轉換請求數據和響應數據
-
自動轉換JSON數據
-
客戶端支持 XRSF
回歸正題
在Vue 項目開發中，我們與接口打交道最多了，如何來
優雅的使用Axios變得尤為重要了。 通常我們通過客戶端向后端發送請求來接收接口數據，然后將這些接口數據完美的呈現到網頁上。同時，與接口打交道那么就會用到網絡請求，與
Vue結合的網絡請求庫有哪些呢？
vue-resourceaxios官方推薦fetch本章將使用
axios來完成接口的請求，以及對axios請求的封裝，來滿足業務開發。
一次編寫， 終身受用😁
另外注意 ：光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
開始
安裝axios
yarn add axios
封裝http.js
創建單獨文件來封裝axios，封裝的同時，你需要和
后端協商好一些約定，請求頭，狀態碼,請求超時時間.......引入
必要的UI 提示框, 不同的狀態碼，提示不同的響應，
請求頭: 來實現一些具體的業務，必須攜帶一些參數才可以請求(例如：會員業務)
狀態碼: 根據接口返回的不同status， 來執行不同的業務，這塊需要和后端約定好。
請求攔截器: 根據請求的請求頭設定，來決定哪些請求可以訪問。
響應攔截器： 這塊就是根據后端返回來的狀態碼判定執行不同業務
完整代碼
配置多域名請求不同URL
一般自己寫項目時， 一個接口URL 就可以了。但在實際項目開發中，一個項目可能會請求不同的服務器的url，這時，我們簡單的配置下訪問接口域名，然后不同域名的接口，直接換對象調用即可，這樣不管有多少個不同的接口，我們都可以很好的管理使用。
完整代碼
到現在 axios 基本封裝完成，可以滿足你基本業務需求了
axios封裝完事了， 接下來就是封裝單獨的業務模塊請求了，這塊怎么划分 完全看個人風格,， 下面我會列出兩種
業務需求注意:
必須引入 http.jsaxios必須引入 base.js接口url必須在Vue 入口文件下，引入業務需求 api.js,並且將api掛載到Vue 原型上剩下就是寫你對應的業務需求了
風格1
所有請求都寫到一個
api.js文件下
完整代碼
如何使用呢？
全局掛載api.js
業務組件調用
風格2
可以
新建對應組件模塊的文件來管理對應的 業務請求，這樣接口出現問題，定位錯誤快，最后將不同的文件 引入到一個 api,js 里， 這樣管理起來很方便。
如何使用呢？
封裝 與 不封裝對比
沒有封裝， 裸奔的Axios
最后
1.到現在，Axios基本封裝完事了，也封裝了業務模塊的請求，基本上可以滿足基本的業務需求了。如果項目還需要其它需求，還可以在原有的上面進行再次封裝。
封裝后，如果項目由接口域名有變動，執行調用base.js下的域名對象即可。
2.光理論是不夠的。在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！本文的文字及圖片來源於網絡加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯系我們以作處理