早期我們依賴 XMLHttpRequest 對象（即我們熟知的 Ajax）來實現客戶端與服務器之間的數據交換。然而，隨著 Web 技術的發展，瀏覽器提供了更加優雅、簡潔的方案來替代傳統的 Ajax。

傳統 Ajax 的繁瑣

首先，讓我們回顧一下傳統 Ajax 的實現方式：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('請求失敗，狀態碼：', xhr.status);
    }
  }
};
xhr.onerror = function() {
 console.error('請求出錯');
};
xhr.send();

這段代碼不僅冗長，還需要處理各種狀態碼和事件，使得代碼結構復雜，可讀性較差。

fetch API 的簡潔之美

相比之下，使用 fetch API 可以大大簡化這一過程：

這段代碼使用了 Promise 鏈式調用的方式，不僅代碼量減少了，而且邏輯更加清晰。

fetch API 的主要特點

1. 基于 Promise

fetch API 基于 Promise，這意味著我們可以使用 .then() 和 .catch() 方法來處理異步操作，代碼結構更加清晰。更進一步，我們還可以結合 async/await 語法，使異步代碼看起來更像同步代碼：

2. 簡單的請求配置

fetch API 允許通過第二個參數對象來配置請求：

3. 流式處理

fetch API 返回的是一個 Response 對象，它提供了多種處理響應的方法：

• response.json(): 將響應解析為 JSON
• response.text(): 將響應解析為文本
• response.blob(): 將響應解析為 Blob
• response.arrayBuffer(): 將響應解析為 ArrayBuffer
• response.formData(): 將響應解析為 FormData

這使得處理各種類型的響應變得非常靈活。

中斷請求

通過 AbortController，fetch API 支持中斷正在進行的請求：

此外，相比 Ajax，fetch API 原生支持跨域資源共享（CORS）。

注意事項

盡管 fetch API 有很多優勢，但也有一些需要注意的點：

1. fetch 默認不發送 cookies，如果需要發送，需要設置 credentials: 'include' 選項。

   fetch('https://api.example.com/data', {
     credentials: 'include'
   });
   

2. fetch 不會自動拒絕狀態碼為 4xx 或 5xx 的響應，需要手動檢查 
3. fetch 不支持直接設置請求超時，需要結合 AbortController 和 setTimeout 實現。

fetch API 憑借其簡潔的語法和強大的功能，已經成為現代 Web 開發中進行網絡請求的首選方式。它不僅解決了傳統 Ajax 的繁瑣問題，還提供了更多的功能和更好的靈活性。

?

閱讀原文：https://mp.weixin.qq.com/s/Ua86WJLa8FBQSk4Po60r9w