Vue專案中的API管理及封裝

在Vue中為了要獲取資料，後端通常會提供Restful API接口，前端使用axios發送request到後端。

若專案一大，就會有很多支API需要調用，且一個頁面常常會需要發送多個不同的API，也可能就會發生多個相同的API，散落在不同的頁面之中，此時集中管理API可以大幅提高維護效率。

沒有統一管理的問題：

1. 若api更改名稱，需要找到每個有調用此API的頁面去做更改
2. 需要在每次調用後，攔截需要統一處理的錯誤碼（如400、401、403，可能錯誤後需要跳轉頁面或是回到首頁重新登入）

使用以下方式來統一管理API：

1. axios攔截器與封裝
2. 依據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～