?

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

?

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

1.axios

?

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，樹醬挑了三個覺得特別好用的特征嘮嘮?

?

支持取消請求 (cancelToken)

?

應用場景：當用戶重新刷新數據請求的時候，如果你之前發(fā)起的請求列表還沒有響應，這時候如果你重新發(fā)起請求，會出現二次請求的情況，可以通過cancelToken可以取消上一次請求使用文檔

?

那么cancelToken是如何實現的，可以閱讀下源碼，源碼鏈接 點我感興趣的同學可以看這篇 axios 之cancelToken原理

支持支持Promise API(axios.all、axios.spread等)

?

應用場景：當我想同時發(fā)起多個請求時，axios.all類似于(promise.all)給予我很好的體驗方式，解決了并發(fā)請求的應用場景

?

3.攔截器(攔截請求和返回)

?

應用場景：當一個項目中，多個接口需要前端通過header傳用戶ID、校驗token等等時，我們可以統(tǒng)一添加，同理，當接口出現異常的狀態(tài)碼，如401(登錄過期)需要重定向到登錄頁面時，我們需要統(tǒng)一添加處理，這時候攔截器就起到很重要的作用

?

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

2.API 管理

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

?

通過swagger文檔定義的功能模塊，來定義不同模塊的service，封裝接口增刪改查等方法

?

• 按swagger接口文檔的模塊創(chuàng)建目錄

• 編寫模塊方法(舉個用戶模塊的例子)

?

這里用到了之前封裝的kdutil庫github鏈接中的http方法，本質上是對axios進行二次封裝，通過不同的api操作來封裝不同的請求方法

?

• 導出所有編寫好的模塊

當我們將不同模塊對應的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又是什么玩意？

?

是通過不同環(huán)境(開發(fā)、測試、生產)定義的不同環(huán)境的配置文件(請求api、其他配置等等)具體可以看下樹醬的 《基于 Vue-cli 3x的項目部署》的介紹

?

總結：這種方式優(yōu)勢在于可以很直接的辨別接口增刪改查對應的方法，且掛載在vue對象原型中方便調用，一目了然，劣勢在于重復代碼還是偏多，接下來讓我們一起看看下面的這種方式

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

?

上一節(jié)講完的方式一，導出的本質上是方法，那方式二又是怎么樣的一種形式，答案是導出配置文件

?

• 先“上才藝”，先給目錄結構

?

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

?

• 按模塊編寫api

• 導出所有編寫好的api配置

?

跟上一節(jié)導出模塊一樣，都是使用require.context，然后再結合Object.defindproperty方法來修改對象的屬性，返回一個新的api路徑

?

• 拓展：Object.defineProperty

關于Object.defineProperty，這里也簡單講一下

?

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

?

Object.defineProperty對應的三個數值

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

舉個例子如下?

我們可以看到descriptor中，也就是第三個參數中有個字段enumerable，叫描述對象的enumerable屬性，我們稱為”可枚舉性“

那可枚舉性和不可枚舉性有什么區(qū)別？你看看下面這個例子應該就清楚了，如果是不可枚舉則不顯示，反之即可，也就是當enumerable為false，只返回給定對象的自身可枚舉屬性

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

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

• 如何使用

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

正確調用姿勢：

That's all Thank you，如果你有更好的方式請留下你寶貴的意見，非常感謝

總結

以上是生活随笔為你收集整理的multipartfile前端怎么传_前端那些事如何更好管理 Api 接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。