Fetch 和 Axios 用於發起 HTTP 請求的區別

Fetch 或 Axios 經常被開發者用來在 Web 應用和伺服器之間進行流暢的 HTTP 協議通訊。雖然它們很相似，但有些人認為 Axios 更直觀。但也有內建的 API Fetch，它與 Axios 一樣強大。

Fetch API

Fetch API 是一個內建的 JavaScript 函式，它提供了一個簡單的介面來發起 HTTP 請求。它在現代瀏覽器中引入，是像 XMLHttpRequest 這樣的舊方法的原生替代方案。

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch 返回一個 Promise，這使得它適合處理非同步操作。該 API 靈活，但在處理錯誤和攔截器等複雜場景時可能會變得冗長。

Axios 是一個流行的第三方庫，用於在 JavaScript 中發起 HTTP 請求。它通常因其簡單易用而受到青睞，尤其是在需要攔截器和請求/響應轉換等附加功能的大型應用程式中。

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Axios 也返回一個 Promise，並提供更簡潔的語法，內建支援諸如自動 JSON 解析和超時管理等功能。

特性	Fetch API	Axios
原生支援	內置於現代瀏覽器中；無需額外的庫。	需要透過 npm 或 CDN 安裝。
語法	可能比較冗長，尤其是在處理錯誤時。	更簡潔直觀。
錯誤處理	必須手動檢查 HTTP 錯誤（例如，404、500）。	自動處理 HTTP 錯誤。
請求配置	選項物件用於配置標題、方法、主體等。	Axios 配置物件支援標題、引數、超時等。
瀏覽器支援	廣泛支援，但某些舊版瀏覽器可能需要 polyfills。	也廣泛支援，具有更好的向後相容性。
攔截器	沒有內建的請求/響應攔截器支援。	內建支援攔截器，可用於身份驗證和日誌記錄。
請求取消	需要使用AbortController進行額外的邏輯處理。	內建支援使用CancelToken取消請求。

Sudipa Biswas

更新於：2024年8月19日

54 次檢視

透過完成課程獲得認證