Blog

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

  • Post category:前端相關
  • Post last modified:2022-08-10
  • Reading time:3 mins read
Tags:

在撰寫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';

配置優先順序

axios在設定上有優先順序，分別是: 個別呼叫時設定>創建實例時設定的默認值>全局設定的默認值

雖然在新人檢核有被問到關於集中api管理的必須性，上司的觀點是，有可能個別的baseUrl需要修改或是這些api基本上不可能被修改等等，就看自己的專案性質如何再決定是否將api集中管理囉!

參考文章

https://medium.com/i-am-mike/%E4%BD%BF%E7%94%A8axios%E6%99%82%E4%BD%A0%E7%9A%84api%E9%83%BD%E6%80%8E%E9%BA%BC%E7%AE%A1%E7%90%86-557d88365619
http://axios-js.com/zh-cn/docs/index.html#axios-url-config
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/export