概述

昨天已經了解了基本呼叫 API 的方式以及跟前端呈現的方式，這邊在找尋相關資料時，也看到了許多前端前輩們在實務上的會使用的方式。大部分會將 API 集中管理，原因是在呼叫 API 時，如果功能越多，API 越多，每一次都要針對各個 API 進行不一樣的處理則會造成維護跟撰寫的不易，再加上如果 API 路徑有變動的，則會有牽一髮則動全身的感覺。所以今天將會講述如何將 API 進行集中管理，會記錄看到的方法，明天在記錄實作的過程。

集中管理 API

這邊會記錄使用的概念，從 api.js 的撰寫再到如何在 .vue 檔案中使用這些 API 變數及功能。

參考:

Vue | 使用Axios做清楚易維護的api管理 · 這裡是YUKI

Step1: 新建 api.js 檔案

檔案中要放基本的 API 路徑宣告及使用方式，將這些內容放在變數中。

在 api.js 中同樣要引入:

import axios from 'axios';

Step2: 在 api.js 檔案中，使用 axios.create() 建立axios實體，存放基礎的 url 路徑內容，例如如果是會員登入註冊等功能，可以歸類成 userRequest (名稱自定義)，在後續就可以在這個基礎上建立其他的功能作用。

//這是自定義創建的axios實例的默認值
const userRequest = axios.create(
 { baseURL: 'https://api/search/' }
)

Step3: 在 api.js 檔案中，可以利用剛剛前面定義的 userRequest 再次定義與此api相關的呼叫 (get、post、put等等)，並 export 出來，如下:

export const apiUserLogin = data =>{
 userRequest.post( '/signIn' , data );
}

Step4: 實際在 vue 檔案中的使用方式

將會在頁面 (vue) 用上的 api 從 api.js 裡 import 進來，再加上後續要呼叫的 api 參數，如下:

import { apiUserLogout, apiUserLogin } from "api.js";

//post
apiUserLogin({
 email: "milkcat@gmail.com",
 password: "123456789"
})
.then( res => {
 console.log( res );
})
.catch( err => {
 console.log(err);
});

//get
apiUserLogout( )
.then( res => {
 console.log( res.data );
})
.catch( err => {
 console.log(err);
});

我個人覺得是將共同的一些設定包裝在一個檔案中，之後再透過引用的方式增添其他功能。

如此的話就不需要每一個 API 都各別做宣告及呼叫。

這邊主要是將網上所說的概念先進行梳理，明天將會這些概念放到現在的專案來。

今天的紀錄就先到這裡的了~

明天見~~

歡迎底下留言討論喔~