Axios 和 Fetch API？選擇正確的 HTTP 用戶端

TL;DR: Axios 和 Fetch API 是流行的 HTTP 用戶端。 Axios 提供更多功能和更簡單的錯誤處理，而 Fetch API 是輕量級的並且是瀏覽器原生的。對於複雜的專案選擇 Axios，對於簡單的專案選擇 Fetch

處理非同步 HTTP 請求的兩種最常見的方法是 fetch() 和 Axios。儘管這是一種常見的操作，但您選擇使用的請求類型可能會對應用程式的可用性和整體效率產生相當大的影響。因此，明智的做法是在選擇之前徹底檢查它們並權衡它們的利弊。

本文將全面比較這兩種廣泛使用的工具，幫助您為您的專案做出最佳選擇。

什麼是 Axios？

是一個基於 Promise 的第三方 HTTP 用戶端，常見於瀏覽器 ( XMLHttpRequests ) 和 Node.js (HTTP) 環境中。它提供了一個方便的 API，能夠攔截請求和回應、執行請求取消以及自動將回應資料解析為 JSON 格式。 Axios 也支援針對 XSRF（跨站點請求偽造）的用戶端保護。您可以使用 npm 等套件管理器安裝 Axios 或透過 CDN 將其新增至您的專案。

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

axios的優點

• 自動取消請求。
• 內建錯誤處理、攔截器和簡潔的語法。
• 與各種舊式和現代瀏覽器的兼容性。
• 基於承諾。

axios的缺點

• 外部相依性。
• 捆綁包尺寸大且複雜性明顯。

什麼是 fetch()？

Fetch API 也是基於 Promise 的，但它是所有現代瀏覽器中都可用的本機 JavaScript API。它也與 Node.js 環境相容，並用更簡單、更現代的方法取代了舊版 XMLHttpRequests。 Fetch API 提供 fetch() 方法傳送請求，支援 JSON、Blob、FormData 等多種請求和回應類型。

fetch() 的優點

• 原生瀏覽器支持，因此無需外部依賴。
• 輕量級且更簡單的 API。
• 基於承諾。
• fetch() 是一個低階 API。因此，它提供了更細粒度的控制。

fetch() 的缺點

• 與 Ax​​ios 相比，錯誤處理和請求逾時的內建功能有限。
• 常見任務的詳細程式碼。

axios 和 fetch() 之間的區別

既然您現在了解了 Axios 和 fetch() 是什麼，讓我們透過程式碼範例來比較和對比這兩者的一些關鍵功能。

基本文法

就語法而言，Axios 提供了比 fetch() 更緊湊且對開發人員友好的語法。

使用 Axios 的簡單 POST 請求：

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

與 fetch() 類似的 POST 請求：

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2 id="Post-Created">Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

這是非常值得注意的，儘管 fetch() 是輕量級的，但它仍然需要更多的手動工作來執行一些常見任務。例如，Axios帶有自動JSON解析功能，可以直接存取回應的資料物件。相反，在 fetch() 中，您必須手動解析 JSON 格式的回應。儘管兩種方法都產生相似的結果，但您必須明確處理 fetch() 中的錯誤、序列化和標頭。

錯誤處理

處理錯誤是開發者幾乎每天都會遇到的事情。例如，axios 預設將任何狀態碼超出 2xx 範圍的 HTTP 呼叫視為錯誤。它為您提供了一個解釋性對象，可用於管理和偵錯錯誤。

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() 不會自動將 HTTP 錯誤（狀態碼 4xx 或 5xx）視為錯誤。您必須手動執行條件檢查來識別回應狀態以捕獲錯誤。但是您可以在專案中使用自訂錯誤處理邏輯來收集資訊並處理錯誤，就像 Axios 一樣。

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

與瀏覽器的向後相容性

如果您需要與舊版依賴項相容，例如 Internet Explorer (IE11) 等舊版瀏覽器或大多數現代瀏覽器的舊版，您的首選解決方案是 Axios。

fetch() 是現代瀏覽器原生的，並且可以與它們無縫運作。但是，它不支援某些較舊的瀏覽器版本。你仍然可以將它與像whatwg-fetch這樣的polyfill一起使用，以使其在不使用fetch()的瀏覽器中工作。但需要注意的是，使用 polyfill 可能會增加套件的大小並影響效能。

！ (https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

HTTP攔截器

HTTP 攔截器允許攔截請求和回應，並在以下情況下派上用場：

• 修改請求（例如，向標頭新增身份驗證時）。
• 轉換響應（預處理響應資料）。
• 全域處理錯誤（遇到 401 未經授權時記錄和重定向）。

這個強大的功能是 Axios 開箱即用的，但 fetch() 本身並不支援。

使用 Axios 將驗證令牌加入請求中：

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

但是，這並不意味著fetch()不能執行HTTP攔截。您可以使用中間件手動編寫自訂包裝器來模倣此行為。

使用 fetch() 包裝器將驗證令牌加入請求中：

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2 id="Post-Created">Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

回應超時

回應逾時是指客戶端等待伺服器回應的時間。如果達到此時間限制，則該請求將被視為不成功。 Axios 和 fetch() 支援請求逾時，這在處理不可靠或緩慢的網路時至關重要。儘管如此，Axios 透過提供更直接的超時管理方法而處於領先地位。

Axios 請求超時：

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() 請求超時：

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios 使用超時選項透過更乾淨的程式碼更簡單、更優雅地處理超時。但是，fetch() 需要使用 AbortController() 進行手動超時處理，這使您可以更好地控制請求中止的方式和時間。

GitHub 參考

有關更多詳細信息，請參閱 GitHub 存儲庫上的 Axios 與 Fetch 的完整示例。

結論

與許多工具一樣，Axios 和 Fetch API 都有優點和缺點。如果您需要自動解析 JSON、整合錯誤處理和攔截器來簡化複雜的流程，請選擇 Axios。如果您想要一個最適合現代瀏覽器環境並且不需要外部程式庫的純淨簡單的介面，請選擇 fetch()。簡而言之，兩者都工作得很好，但它們適合不同程度的複雜性和功能要求。

相關部落格

• 處理 JavaScript 中 HTTP 錯誤的 5 個最佳實務
• 用於處理 HTTP 請求的 5 個最佳 Chrome 擴充功能
• 如何將 ASP.NET HTTP 處理程序和模組遷移到 ASP.NET Core 中間件
• 使用 Fetch 請求高效處理 Syncfusion ASP.NET MVC DataGrid 中的 CRUD 操作

以上是Axios 和 Fetch API？選擇正確的 HTTP 用戶端的詳細內容。更多資訊請關注PHP中文網其他相關文章！