Vue Axios 封裝
定義
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特性
- 支持Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 自動轉換JSON數據
- 客戶端支持 XRSF
迴歸正題
在Vue 項目開發中，我們與接口打交道最多了，如何來優雅的使用Axios變得尤爲重要了。
通常我們通過客戶端向後端發送請求來接收接口數據，然後將這些接口數據完美的呈現到網頁上。
同時，與接口打交道那麼就會用到網絡請求，與 Vue 結合的網絡請求庫有哪些呢？
- vue-resource
- axios 官方推薦
- fetch
本章將使用 axios 來完成接口的請求，以及對axios 請求的封裝，來滿足業務開發。
一次編寫， 終身受用 😁
開始
安裝axios
yarn add axios
封裝http.js
創建單獨文件來封裝axios，封裝的同時，你需要和 後端 協商好一些約定，請求頭 ， 狀態碼, 請求超時時間…引入必要的UI 提示框, 不同的狀態碼，提示不同的響應，請求頭: 來實現一些具體的業務，必須攜帶一些參數纔可以請求(例如：會員業務)狀態碼: 根據接口返回的不同status ， 來執行不同的業務，這塊需要和後端約定好。請求攔截器: 根據請求的請求頭設定，來決定哪些請求可以訪問。響應攔截器： 這塊就是根據 後端 返回來的狀態碼判定執行不同業務
配置多域名請求不同URL
一般自己寫項目時， 一個接口URL 就可以了。但在實際項目開發中，一個項目可能會請求不同的服務器的url，這時，我們簡單的配置下訪問接口域名，然後不同域名的接口，直接換對象調用即可，這樣不管有多少個不同的接口，我們都可以很好的管理使用。
到現在 axios 基本封裝完成，可以滿足你基本業務需求了
axios 封裝完事了， 接下來就是封裝單獨的業務模塊請求了，這塊怎麼劃分 完全看個人風格,， 下面我會列出 兩種
業務需求注意:
- 必須引入 http.js axios
- 必須引入 base.js 接口url
- 必須在Vue 入口文件下，引入業務需求 api.js,並且將api掛載到Vue 原型上
- 剩下就是寫你對應的業務需求了
風格1
所有請求都寫到一個api.js 文件下
如何使用呢？
全局掛載api.js
業務組件調用
風格2
可以新建對應組件模塊的文件來管理對應的 業務請求，這樣接口出現問題，定位錯誤快，最後將不同的文件 引入到一個 api,js 裏， 這樣管理起來很方便。
如何使用呢？
封裝 與 不封裝對比
到現在，Axios基本封裝完事了，也封裝了業務模塊的請求，基本上可以滿足基本的業務需求了。如果項目還需要其它需求，還可以在原有的上面進行再次封裝。
封裝後，如果項目由接口域名有變動，執行調用base.js下的域名對象即可。