Hi 大家，今天想來談談管理 API 這件事。

跟後端合作中，接 API 是最必須且熟悉的過程，從後端接回來的 API 一兩支分開管理那倒還好，但假設今天的專案需要有 10.20支 API 時，你光要寫axios.get, axios.post 或者是要改寫你的api domain(網域)的時候，就會讓你發瘋的…

那這時候該怎麼辦呢？就輪到 axios 登場啦！
先來理解一下什麼是 axios

💡 axios 是一個 Promise based 的 HTTP 請求工具，他可以運行在「瀏覽器環境」與「Node.js」中。
下圖中可見，axios 發出一個請求後，會先經過請求攔截器（Interceptors），之後依照執行環境選擇適當的請求適配器（adapter，介面）發出請求。取得請求的回應後，經過處理回應的攔截器，最後回傳給使用者，完成整個 HTTP 請求。

一般的個別的請求寫法會如以下：

import axios from 'axios';
//GET
axios.get('http://api/user')
.then(res =>{
    console.log(res);
}).catch(err => {
    console.log(err);
})

但我們若想要統一管理的話，可以使用 **axios.create()，**可以利用這個方法去創在一個新的axios的實體，再來去應用。

當我們使用 import axios from 'axios' 時，此時的 axios 型別為 AxiosStatic。之後如果是透過 axios.create() 取得的回傳值，型別則會是 AxiosInstance。

export interface AxiosStatic extends AxiosInstance {
  create(config?: CreateAxiosDefaults): AxiosInstance;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  Axios: typeof Axios;
  AxiosError: typeof AxiosError;
  HttpStatusCode: typeof HttpStatusCode;
  readonly VERSION: string;
  isCancel: typeof isCancel;
  all: typeof all;
  spread: typeof spread;
  isAxiosError: typeof isAxiosError;
  toFormData: typeof toFormData;
  formToJSON: typeof formToJSON;
  getAdapter: typeof getAdapter;
  CanceledError: typeof CanceledError;
  AxiosHeaders: typeof AxiosHeaders;
}

const userRequest = axios.create({
  baseURL: 'https://api/user/'
});

• 可以確保你的api來源都是同一個進入點進來的
• axios 本身回傳是一個 Promise

axios 類別生成的屬性有兩個：
interceptors

api.create.interceptors.request.use((config) => {
  // 在請求發送前的攔截
  return config;
});

api.create.interceptors.response.use((response) => response,(error)=> {
  // 在響應接受後的攔截
  const { status } = error.response;
	if(status === 401){
		return Promise.reject();
	}
});

defaults

axios 預設的 config

export function setHeader(token: string) {
  api.create.defaults.headers.common['Authorization'] = `${token}`;
}

參考文章：

• 深入淺出 axios（一）：預設 axios 物件、Axios 類別、攔截器
• 使用Axios你的API都怎麼管理？