在前端開發中，處理 HTTP 請求是一個常見且重要的任務。JavaScript 提供了多種方式來發送網絡請求，其中最受歡迎的兩種方式分別就是 Fetch API 和 Axios。儘管兩者都能完成同樣的任務，即從客户端向服務器發送請求並接收響應，但它們在使用方式、功能及靈活性方面各有千秋，下面我們簡單瞭解下。

1. 基礎介紹

Fetch API

Fetch API 是現代瀏覽器內置的一個標準 JavaScript API，用於處理 HTTP 請求。它是 XMLHttpRequest 的現代替代品，提供了一個更加強大和靈活的操作方式。Fetch 提供了一個全局 fetch() 函數，能夠非常便捷地處理 GET、POST 等HTTP請求。Fetch 返回的是一個 Promise 對象，這讓它可以很容易地用於異步操作。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios

Axios 是一個基於 Promise 的 HTTP 客户端，可用於瀏覽器和 node.js。它是一個第三方庫，因此需要通過 npm 安裝。Axios 提供了一些額外的功能和優點，如自動轉換 JSON 數據，客户端支持防禦 XSRF 等。

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

2. 功能方面對比

錯誤處理

Fetch 和 Axios 在錯誤處理方面有一些不同。使用 Fetch 時，即使服務器返回一個 HTTP 錯誤狀態碼，它也不會自動觸發 catch。只有網絡故障或請求阻止時，Fetch 才會被視為拒絕（reject）。

而 Axios 會自動觸發 catch，當收到的響應狀態碼落在2xx範圍外時。

響應數據

Fetch 在處理服務器返回的數據時默認不會將其解析為 JSON，需要手動調用 .json() 方法進行轉換。而 Axios 自動將所有從服務器返回的數據轉換為 JSON，無需額外操作。

瀏覽器兼容性

Fetch 在較老的瀏覽器（如 IE11）中沒有原生支持，需要使用 polyfill 來兼容。而 Axios 由於是一個獨立的庫，可以在所有支持 Promise 的瀏覽器中使用。

3. 使用場景建議

使用 Axios 當：

• 你需要廣泛的瀏覽器支持，包括老版本瀏覽器。
• 你的項目中需要處理大量的 HTTP 請求，並且需要更豐富的配置項和簡化的錯誤處理。
• 你需要使用請求和響應攔截器提供額外的功能。

使用 Fetch 當：

• 你的項目不需要支持老版本瀏覽器，或者你可以接受使用 Polyfills。
• 你傾向於使用現代瀏覽器已內置的 API，無需額外依賴。
• 你的請求比較簡單，沒有複雜的配置需求。

4. 如何生成 Axios/Fetch 代碼

我們可以通過 Apifox 自動創建用於發出 HTTP 請求的 Axios 代碼。

結論

Axios 和 fetch() 都是在 JavaScript 中發出 HTTP 請求的強大且可靠的方法。您可以選擇更適合您的項目和風格的一個，甚至可以將兩者用於不同的目的。重要的是瞭解它們的工作原理以及如何有效地使用它們。