《前端那些事》如何更好管理 Api 接口

❝
前沿：自從前端和後端分家以後，先後端接口對接就成爲了家常，「誰」也離不開誰，而對接接口的過程就離不開接口文檔，比較主流就是Swagger(強大的API文檔工具),固然今天它不是主角，頂多也就是個輔助。這篇文章旨在梳理如何在前端項目中更好的去管理跟後端「對接」的接口html
❞

聊接口管理，離不開請求庫，vue技術棧中請求庫談及最多的，非axios莫屬，先讓咱們從新梳理下axios前端

1.axios

❝
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，樹醬挑了三個以爲特別好用的特徵嘮嘮👇vue
❞

1.1支持取消請求 (cancelToken)

❝
應用場景：當用戶從新刷新數據請求的時候，若是你以前發起的請求列表尚未響應，這時候若是你從新發起請求，會出現二次請求的狀況，能夠經過cancelToken能夠取消上一次請求使用文檔node
❞

那麼cancelToken是如何實現的，能夠閱讀下源碼，源碼連接點我感興趣的同窗能夠看這篇 axios 之cancelToken原理webpack

2.支持Promise API（axios.all、axios.spread等）

❝
應用場景：當我想同時發起多個請求時，axios.all相似於(promise.all）給予我很好的體驗方式，解決了併發請求的應用場景ios
❞

3.攔截器（攔截請求和返回）

❝
應用場景：當一個項目中，多個接口須要前端經過header傳用戶ID、校驗token等等時，咱們能夠統一添加，同理，當接口出現異常的狀態碼，如401（登陸過時）須要重定向到登陸頁面時，咱們須要統一添加處理，這時候攔截器就起到很重要的做用git
❞

好了廢話很少說，進入今天的主題：如何更好管理 Api 接口。github

2.API 管理

2.1 方式一：按模塊封裝方法

❝
經過swagger文檔定義的功能模塊，來定義不一樣模塊的service，封裝接口增刪改查等方法web
❞

編寫模塊方法（舉個用戶模塊的例子）

❝
這裏用到了以前封裝的kdutil庫github連接中的http方法，本質上是對axios進行二次封裝，經過不一樣的api操做來封裝不一樣的請求方法vue-router
❞

導出全部編寫好的模塊

當咱們將不一樣模塊對應的Swagger接口文檔都封裝完成以後，能夠將各模塊導出安裝爲插件的形式來掛載，模塊導出使用的是webpack打包的require.context的方法，引入指定的路徑下匹配到的模塊引用，以下所示👇

爲了讓這些模塊在Vue中更好地直接使用，咱們將導出的模塊經過「掛在」Vue.prototype的形式注入到Vue組件中,以此來爲Vue對象添加了一個原型屬性，而不是一個全局變量。

這裏涉及到vue插件的使用，vue 插件通常來用進行以下幾種操做

添加全局方法或者 property。如：vue-custom-element
添加全局資源：指令/過濾器/過渡等。如 vue-touch
經過全局混入來添加一些組件選項。如 vue-router
添加 Vue 實例方法，經過把它們添加到 Vue.prototype 上實現。（上文使用的是這種操做）
一個庫，提供本身的 API，同時提供上面提到的一個或多個功能。如 vue-router

Vue.js 的插件須要暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象，上圖解析出來以下所示

最後在main.js中經過全局方法 Vue.use() 使用插件如向下所示👇

如何在項目中調用

由於已經掛載在vue對象的原型上，可使用this.$api去調模塊

❝
聊到你可能疑惑就是，你這接口路徑不對啊，怎麼是相對路徑呢？實際上是在axios.create的時候就把路徑寫進去了,以下所示👇
❞

而這個process.env.VUE_APP_URL又是什麼玩意？

❝
是經過不一樣環境（開發、測試、生產）定義的不一樣環境的配置文件（請求api、其餘配置等等）具體能夠看下樹醬的《基於 Vue-cli 3x的項目部署》的介紹
❞

總結：這種方式優點在於能夠很直接的辨別接口增刪改查對應的方法，且掛載在vue對象原型中方便調用，一目瞭然，劣勢在於重複代碼仍是偏多，接下來讓咱們一塊兒看看下面的這種方式

2.2 方式二. 按api文檔編寫API

❝
上一節講完的方式一，導出的本質上是方法，那方式二又是怎麼樣的一種形式，答案是導出配置文件
❞

❝
經過在配置文件夾定義api，同理以不一樣模塊拆分，下面舉user模塊這個例子說明
❞

按模塊編寫api

導出全部編寫好的api配置

❝
跟上一節導出模塊同樣，都是使用require.context，而後再結合Object.defindproperty方法來修改對象的屬性，返回一個新的api路徑
❞

拓展：Object.defineProperty

關於Object.defineProperty，這裏也簡單講一下

❝
MDN介紹：直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回此對象。
❞

Object.defineProperty對應的三個數值

obj 要在其上定義屬性的對象。
prop要定義或修改的屬性的名稱。
descriptor將被定義或修改的屬性描述符

舉個例子以下👇

咱們能夠看到descriptor中，也就是第三個參數中有個字段enumerable，叫描述對象的enumerable屬性，咱們稱爲」可枚舉性「

那可枚舉性和不可枚舉性有什麼區別？你看看下面這個例子應該就清楚了，若是是不可枚舉則不顯示，反之便可，也就是當enumerable爲false，只返回給定對象的自身可枚舉屬性

一樣的下面幾種方式也是一樣的思路（只返回給定對象的自身可枚舉屬性）

一不當心又聊偏了，迴歸正題，當咱們成功導出API配置文件後，接下來就是如何使用了

如何使用

將配置掛載到vue對象原型上

正確調用姿式：

That's all Thank you，若是你有更好的方式請留下你寶貴的意見，很是感謝

❝
樹醬但願將前端的樂趣帶給你們本文已收錄 github.com/littleTreem… 喜歡就star✨
❞

往期文章

請你喝杯🍵 記得三連哦～

1.閱讀完記得給🌲 醬點個贊哦，有👍 有動力

2.關注公衆號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star✨