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 免費獲取，小白勿進哦！本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72099.html
標籤：JavaScript
上一篇：Google VS 百度
下一篇：拿2k的前端開發都會做些什么？