Vue中Axios的封裝管理

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

最後

到如今，Axios基本封裝完事了，也封裝了業務模塊的請求，基本上能夠知足基本的業務需求了。若是項目還須要其它需求，還能夠在原有的上面進行再次封裝。

封裝後，若是項目由接口域名有變更，執行調用base.js下的域名對象便可。