Categories: 前端相關

Vue | 使用Axios做清楚易維護的api管理

在撰寫Vue專案時，通常都要透過後端call api拿資料來存在data裡，並且因為資料會一直變動，不可能寫死在前端~
當頁面一多，需要call的api變多時，api路徑有修改，就需要眾裡尋它千百度，一個一個做修正，
或者是有時在審視哪些api有無使用等等，要是能集中管理與檢視api路徑真是再好不過了對吧?
那麼做適當的api管理是菜鳥前端的一大課題，今天來記錄在Vue專案上使用axios的管理方式。

管理自定義 axios 實體

axios有提供幾個管理api用的方法，以下步驟：

1.新建 api.js 檔案

用作統一管理api的進入點，在各檔案引入 api.js 後就可以用定義好的func呼叫整理好的 api 方法

引入axios

import axios from 'axios';

axios.create() 建立一個axios實體，像 userRequest 是專供使用者相關api的axios實體，可以創立別的axios實體做對應目的的url設定。

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

利用剛剛定義的userResearch再次定義與此api相關的呼叫 (get、post、put等等)，且要 export 出來，別的js import後才能呼叫它喔~
(這邊不理解的話可以先去看js的export知識)

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

//也可以定義完全部後，再一次性 export
const apiUserLogout = ( ) => {
 userRequest.get( '/signOut' );
};
const apiUserLogin = data => {
 userRequest.post( '/signIn' , data );
};
export { apiUserLogout, apiUserLogin };

2.使用 api.js 裡的api

將會在這個頁面用上的 api 從 api.js 裡 import 進來，再加上後續要呼叫的 api 參數，就大功告成，比起落落長的完整寫出api，這種集中管理的寫法能讓要呼叫的參數都清楚呈現，也很好尋找要修改的對應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);
});

全局設置的 axios默認值

axios有提供設定預設值，如果大部分的基本的數值都一樣、變動不大，後續新增上比較方便。

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';