vue全家桶 ---axios的使用和二次封裝

一、前提基礎

• 本文在vue項目搭建的基礎上，vue-router路由配置的基礎上，對vue項目中axios的使用進行介紹。

二、axios的使用以及攔截器的設置。

1. 安裝axios

cnpm i axios -S
複製代碼

2. 新建http文件夾，新建index.js,config.js文件
3. 在config.js對axios進行二次封裝，進行請求攔截（主要用於配置token和請求數據類型）和響應攔截（主要用於http狀態碼和後端自定義的code碼進行全局處理）。
4. 在index.js文件中導入config.js，並掛載在vue原型鏈上（也可掛載在vue的實例對象上,採用按需引用的方式可跳過）。
5. 在main.js中引入配置，若是所示：

   

6. 點擊按鈕獲取菜單數據，這裏使用express啓動服務，封裝菜單api接口來模擬實際場景。

   

7. 點擊按鈕，效果如圖所示。

   

   

三、api集中管理與按需引用。

1. 對api的集中管理和按需引用有助於項目管理和重構，減輕vue實例的負擔，優化項目性能。
2. 以前咱們使用是直接把封裝好的axios直接掛載在vue的vue原型鏈上，而後在組件中經過this.$axios.get()的方式來使用，如今咱們稍微修改下。
3. 從main.js中刪除require('./http')，修改http下index.js文件，修改home.vue中的接口引用。如圖所示：

   

4. 如今咱們回到頁面發現效果和原來同樣。

四、總結

• 對axios的二次封裝能夠統一先後端交互的請求/響應數據類型，統一處理http錯誤碼和自定義的code，避免在組件中頻繁的判斷，以及code碼的使用混亂。
• 對api的集中管理和按需引用有助於項目管理和重構，代碼的複用,實際項目開發時能夠按模塊對api進行劃分，結構清晰。