使用Axios你的API都怎麼管理？

Mike

Published in

I am Mike

Jan 18, 2019

現在前端在開發的時候常常會需要打api去跟後端要資料去做非同步的處理，我相信各位在慢慢脫離jQuery之後會需要另外一個處理非同步的工具就是axios，目前就現在的市場來看也蠻多人在使用axios，就連我也是。

好！但這不是重點，我相信大部分的人要使用axios都是這樣做的

import axios from 'axios';//GET
axios.get('http://api/user')
.then(res =>{
    console.log(res);
}).catch(err => {
    console.log(err);
})//POST
axios.post('http://api/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(res => {
    console.log(response);
})
.catch(err => {
    console.log(error);
});

這樣做很標準，沒有錯，但是今天會遇到一個狀況，如果當我們在開發稍微具規模的架構的時候你的api會打超過10支、20支的時候你的api管理就會變得不太好管理，如果今天要改你的api domain(網域)的時候你就要全改。

你會說我會把前面的domain拉出去變成變數或是集中把所有的api放入陣列裡面再去利用索引呼叫做管理，甚至你有用前端框架Vue或React你說我就統一拉到Vuex或是Redux去管理等等方法，但是我都覺得這類的方法都不會是最佳管理api的最佳作法，相信我!這類型管理的方式我做了許多的嘗試…，尤其是當你遇到api的來源是透過不同機器上面傳來的時候，不同domain的api管理上面相對來說相對難度也會提高，除了程式可讀性以外，還要好維護，不知道各位都怎麼去管理你們網站的api呢？

我會怎麼做？

在這邊我來分享一下我現在都怎麼去利用axios去管理我的api，首先你仔細去看axios官方的文件，裡面有個 axios.create 的方法，我們可以利用這個方法去創在一個新的axios的實體，再來去應用。

先開一個新的檔案叫api.js

狀況是這樣的，假設我今天有一個部落格平台要做，然後有三個項目的功能要做，三個項目的api都各自散落在不同的機器，每個項目都有數個api需要使用到。

首先我們可以

透過 axios.create 去創造一個實體，再利用變數去接這個實體，
然後在透過這個變數的實體去做get或是post，然後在 export 出去給外面的 js去 import 就好。

我要使用的話就可以 import 這支 api.js

或是搭配 Async / Await 來做，因為你可能會需要同時等復數的api 同時都把資料給get回來才可以做後續的動作。

有什麼好處呢？

首先你可以確保你的api來源都是同一個進入點進來的，所以即便你今天在許多js裡面都去呼叫api，最後管理的只會有一支，你要去做domain的修改或是新增都會方便不少。
透過axios.create所創造出來的實體你可以透過變數去重新給予這個實體一個新的名字，然後透過命名規則的方式來區分你的api來分類，在每個 import 的 js 檔案只要透過命名規則就可以清楚知道這個api目前是從哪個機器跟分類的。
因為這樣可以減少攏長的api url，增加業務邏輯上面code的整潔度，然後axios 本身回傳是一個 Promise ，所以我們還可以搭配 Async / Await 來減少.then的使用，增加code的可讀性。

目前axios這樣的使用是我覺得最好用也最方便管理api的使用方式，推薦給各位想了解axios還有怎麼樣使用的朋友。