1、前提基礎
- 本文在vue專案搭建的基礎上，vue-router路由配置的基礎上，對vue專案中axios的使用進行介紹。
2、axios的使用以及攔截器的設定。
- 安裝axios
cnpm i axios -S
複製程式碼- 新建http資料夾，新建index.js,config.js檔案
- 在config.js對axios進行二次封裝，進行請求攔截（主要用於配置token和請求資料型別）和響應攔截（主要用於http狀態碼和後端自定義的code碼進行全域性處理）。
- 在index.js檔案中匯入config.js，並掛載在vue原型鏈上（也可掛載在vue的例項物件上,採用按需引用的方式可跳過）。
- 在main.js中引入配置，如果所示：
- 點選按鈕獲取選單資料，這裡使用express啟動服務，封裝選單api介面來模擬實際場景。
- 點選按鈕，效果如圖所示。
3、api集中管理與按需引用。
- 對api的集中管理和按需引用有助於專案管理和重構，減輕vue例項的負擔，優化專案效能。
- 之前我們使用是直接把封裝好的axios直接掛載在vue的vue原型鏈上，然後在元件中通過this.$axios.get()的方式來使用，現在我們稍微修改下。
- 從main.js中刪除require('./http')，修改http下index.js檔案，修改home.vue中的介面引用。如圖所示：
- 現在我們回到頁面發現效果和原來一樣。
4、總結
- 對axios的二次封裝可以統一前後端互動的請求/響應資料型別，統一處理http錯誤碼和自定義的code，避免在元件中頻繁的判斷，以及code碼的使用混亂。
- 對api的集中管理和按需引用有助於專案管理和重構，程式碼的複用,實際專案開發時可以按模組對api進行劃分，結構清晰。