作者：hyangtenghttps://segmentfault.com/a/1190000017925880
在vue開發中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規範統一的接口，如何定義呢？
方法可能不隻一種，本文使用axios+async/await進行接口的統一管理。
本文使用vue-cli生成的項目舉例。
舉例
拿segmentfault的官網簡單舉個例子，先看一下官網：
看下網站，腦補一下背景給出的文檔，如果背景不傻的話給出的文檔肯定分子產品的，假設背景給出的文檔分為了以下幾個子產品(假設的，不要較真哈)：
- 資訊子產品 (我的訂閱、熱門資訊)
- 問答子產品
- 專欄子產品
- 講堂子產品
- 圈子子產品
- 發現子產品
- 個人資訊子產品
- 使用者登入注冊子產品
- ...還有其他很多
一般來說，網站的首頁都是複雜的，會用到很多其他頁面也會用到api，是以接口統一管理可以做到api的複用：
那麼如何做呢？
動手
首先，在src目錄下建立一個檔案夾，我這裡叫apis，背景提供的所有接口都在這裡定義：
cd src #切換到src目錄mkdir apis #建立apis檔案
第二步，按照背景文檔劃分的子產品建立js檔案,這裡簡單舉個例子：
- 資訊子產品： info.js
- 登入注冊子產品: member.js
- 個人資訊子產品 user_info.js
- ....
cd apis #切換到apis目錄touch info.js member.js user_info.js #建立js檔案
現在的目錄大概是這個樣子：
src apis info.js member.js user_info.js main.js
3
第三步，需要引入axios做相應的配置。
在apis下建立一個檔案夾，叫http.js，在裡面做axios相應的配置。
touch http.js //建立http.js檔案
配置如下：
配置簡要說明一下：
- 引入axios，建立了個axios的執行個體(axios的執行個體的axios的功能一樣)。
- 請求攔截器響應攔截器不是本文重點，略過。
- 第30行代碼及以後是重點，拉出來重點看一下。
第四步，在apis下面的js檔案中引入 http.js導出的函數，拿其中一個檔案 member.js說明：
第五步，在元件中使用接口。
登陸元件 Login.js使用登入接口：
這樣定義接口雖然看起來麻煩點，但有以下幾個好處：
- 代碼看起來規範，所有的接口都在一個檔案夾定義，不用分散的各個元件，維護起來簡單，例如背景的一些url變了，改起來也友善。
- 可以做到接口一次定義，到處使用。
例如首頁使用了很多api：
使用者界面也會用到使用者資訊api：
就先寫到這裡了，如有錯誤，請在評論區指正，下次整理下使用者權限相關的内容，包括jwt、token儲存和更新、頁面權限問題。