Vue專案中的API管理及封裝
Published in
3 min readSep 5, 2019
在Vue中為了要獲取資料,後端通常會提供Restful API接口,前端使用axios發送request到後端。
若專案一大,就會有很多支API需要調用,且一個頁面常常會需要發送多個不同的API,也可能就會發生多個相同的API,散落在不同的頁面之中,此時集中管理API可以大幅提高維護效率。
沒有統一管理的問題:
- 若api更改名稱,需要找到每個有調用此API的頁面去做更改
- 需要在每次調用後,攔截需要統一處理的錯誤碼(如400、401、403,可能錯誤後需要跳轉頁面或是回到首頁重新登入)
使用以下方式來統一管理API:
- axios攔截器與封裝
- 依據API身份,建立不同的API模組,並且統一導出及調用
1. axios攔截器與封裝
首先,在vue專案中的src資料夾下,新增一個apis的資料夾。並在apis內,新增https.js及utils.js的檔案
- utils.js:跳轉、錯誤處理、提示等方法放在這裡
- https.js:封裝axios,設置攔截器,統一管理錯誤
首先先定義當axios攔截到不同的錯誤碼後,需要做什麼處理
新建axios實例,設置攔截器
最後封裝請求方法,並使用export default導出函數
2. 依資料庫表或權限分類API
這裡用course.js作為例子,一個課程的api可以取得課程資訊、取得課程下的學生、刪除及編輯課程
- 在apis資料夾下,創建一個course.js的檔案
- import由https.js導出的函數
3. 在Vue組件中調用api
在組件中引入需要用到的api
或是可以用async/await的寫法
這樣子就大功告成了!趕快去體驗吧!
喜歡的話請留下你的clap clap~