首頁 > 文章 > web前端 > Axios 與 Fetch：哪個最適合 HTTP 請求？

Axios 與 Fetch：哪個最適合 HTTP 請求？

Linda Hamilton原創: 2024-11-27 00:31:11807瀏覽

在 JavaScript 發出 HTTP 請求的方法有很多，但最受歡迎的兩種是 Axios 和本機 fetch() API。在這篇文章中，我們將比較和對照這兩種方法，以確定哪一種更適合不同的場景。

Axios vs Fetch: Which is Best for HTTP Requests?

HTTP 請求的基本作用

HTTP 請求是與 Web 應用程式中的伺服器和 API 通訊的基礎。 Axios 和 fetch() 都被廣泛用於有效地促進這些請求。讓我們深入研究它們的功能，看看它們如何疊加。

什麼是 Axios？

Axios 是一個第三方函式庫，它提供基於 Promise 的 HTTP 用戶端來發出 HTTP 請求。它以其簡單性和靈活性而聞名，在 JavaScript 社群中廣泛使用。

axios基本語法

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

Axios 的主要特點：

設定彈性：同時接受 URL 和設定物件。
自動資料處理： 自動將資料與 JSON 相互轉換。
錯誤處理：自動處理HTTP錯誤狀態碼，將它們傳遞給catch區塊。
簡化回應：直接在回應物件的 data 屬性中傳回伺服器資料。
簡化的錯誤管理：提供更簡化的錯誤處理機制。

例子：

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

為什麼要使用 Axios？

自動 JSON 資料轉換： 將資料與 JSON 無縫地相互轉換。
回應逾時：允許設定請求逾時。
HTTP 攔截器： 讓您攔截請求和回應。
下載進度：追蹤下載和上傳的進度。
同時要求：同時處理多個請求並合併回應。

什麼是抓取？

fetch() 是現代 JavaScript 內建的 API，所有現代瀏覽器都支援。它是一個非同步 Web API，以 Promise 的形式傳回資料。

fetch() 的特點：

基本語法： 簡單明了，採用 URL 和可選選項物件。
向後相容性：可以在具有polyfills的舊版瀏覽器中使用。
可自訂：允許對標頭、正文、方法、模式、憑證、快取、重定向和引用策略進行詳細控制。

如何使用axios發出HTTP請求

首先，使用npm或yarn安裝Axios：

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

您也可以透過 CDN 包含 Axios：

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

以下是如何使用 Axios 發出 GET 請求：

npm install axios
# or
yarn add axios
# or
pnpm install axios

使用 Fetch 發出 HTTP 請求

由於 fetch() 是內建的，因此您不需要安裝任何東西。以下是如何使用 fetch() 發出 GET 請求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

請注意：

資料處理： Axios 會自動將資料與 JSON 相互轉換，而使用 fetch() 時，您必須手動呼叫 response.json()。
錯誤處理： Axios 處理 catch 區塊內的錯誤，而 fetch() 僅拒絕網路錯誤的承諾，而不拒絕 HTTP 狀態錯誤。

fetch 的基本文法

import axios from 'axios';

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

主要特點：

簡單參數： 採用 URL 和選用設定物件。
手動資料處理：需要手動將資料轉換為字串。
回應物件：傳回包含完整回應訊息的回應物件。
錯誤處理：需要手動檢查 HTTP 錯誤的回應狀態碼。

例子：

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

axios 與 Fetch 的比較

發送帶有查詢參數的 GET 請求

Axios：

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

取得：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用 JSON 正文發送 POST 請求

Axios：

axios.get('/api/data', { params: { name: 'Alice', age: 25 } })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

取得：

const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

設定請求逾時

Axios：

axios.post('/api/data', { name: 'Bob', age: 30 })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

取得：

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 })
})
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

使用 async/await 文法

Axios：

axios.get('/api/data', { timeout: 5000 }) // 5 seconds
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

取得：

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // abort after 5 seconds

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

向後相容性

Axios：

需要安裝並包含在您的專案中。
透過 Promise 和其他現代 JavaScript 功能的 Polyfills 支援舊版瀏覽器。
積極維護與新環境的兼容性。

取得：

現代瀏覽器的本機支援。
可以進行填充以支援舊版瀏覽器。
由瀏覽器供應商自動更新。

錯誤處理

Axios：

處理 catch 區塊中的錯誤，並將 2xx 以外的任何狀態碼視為錯誤：

async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

取得：

需要手動狀態檢查：

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}