使用axios.create提高API調用效率

一、簡介

在前端開發中，使用 HTTP 協議進行網絡請求是必不可少的一環。axios 是一個非常方便、易用、強大的 JavaScript http 客戶端，用於在瀏覽器和 node.js 中優雅的處理數據請求和響應。然而，axios.create API 允許我們輕鬆地生成一個基於 axios 的全新實例，並允許我們輕鬆設置實例的默認值。這篇文章將詳細探討如何使用 axios.create API 提高接口調用效率。

二、問題：

在實際開發中，當我們需要同時調用多個 API 同時，我們經常會在每個 HTTP 請求中重複使用的同一設置來設置默認值。比如需要相同的請求頭和認證令牌等等。這樣做雖然可以達到目的，但是會導致代碼臃腫，造成大量冗餘。此時，axios.create 的作用就顯得十分重要。

三、解決方案

1.創建 axios 實例

我們可以使用 axios.create() 方法創建一個 axios 實例，以達到改變默認配置功能。這個方法接收一個可選的 config 對象參數，用於擴展的實例配置。

 const instance = axios.create({
    baseURL: 'http://localhost:8080',
 });

這個代碼片段演示了我們如何創建一個基於 axios 的全新實例，其會默認使用 http://localhost:8080 作為起點，並允許我們在後續的請求中使用相對路徑進行請求。

2.實例方法

實例擁有與axios相同的方法，如 GET，POST，PUT 等等。調用這些方法時，所有設置均與默認配置合併。

instance.get('/user?ID=12345')
    .then((res) => {
        // 代碼邏輯
    })
    .catch((error) => {
        // 錯誤處理
    });

上述代碼演示了如何使用實例方法從 /user 接口獲取 ID 為 12345 的用戶數據。

3.轉化請求和響應

通過 instance.interceptors.request 和 instance.interceptors.response，我們可以為該實例綁定請求和響應轉換器。這些攔截器在請求和響應被攔截被執行。

例如，當我們需要設置一些公共的請求頭時，可以這樣寫：

const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});

instance.interceptors.request.use((config) => {
    config.headers.Authorization = getToken();
    return config;
});

function getToken() {
    return localStorage.getItem('token');
}

這個代碼片段演示了如何使用 instance.interceptors.request，來為一個 axios 實例設置服務器認證令牌。當配置了這個攔截器後，每一次請求時 axios 會從 localStorage 中獲取到一個認證令牌。

四、總結

使用 axios.create 是非常簡單和方便的，尤其當你需要做一些全局的默認設置時。在以上代碼示例中，我們演示了如何使用基於 axios 的 axios.create 配置來創建一個新的 axios 實例。