早期我們依賴 XMLHttpRequest 對象（即我們熟知的 Ajax）來實現(xiàn)客戶端與服務(wù)器之間的數(shù)據(jù)交換。然而，隨著 Web 技術(shù)的發(fā)展，瀏覽器提供了更加優(yōu)雅、簡潔的方案來替代傳統(tǒng)的 Ajax。

傳統(tǒng) Ajax 的繁瑣

首先，讓我們回顧一下傳統(tǒng) Ajax 的實現(xiàn)方式：

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('請求失敗，狀態(tài)碼：', xhr.status);
    }
  }
};
xhr.onerror = function() {
 console.error('請求出錯');
};
xhr.send();

這段代碼不僅冗長，還需要處理各種狀態(tài)碼和事件，使得代碼結(jié)構(gòu)復(fù)雜，可讀性較差。

fetch API 的簡潔之美

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

這段代碼使用了 Promise 鏈?zhǔn)秸{(diào)用的方式，不僅代碼量減少了，而且邏輯更加清晰。

fetch API 的主要特點(diǎn)

1. 基于 Promise

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

2. 簡單的請求配置

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

3. 流式處理

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

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

這使得處理各種類型的響應(yīng)變得非常靈活。

中斷請求

通過 AbortController，fetch API 支持中斷正在進(jìn)行的請求：

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

注意事項

盡管 fetch API 有很多優(yōu)勢，但也有一些需要注意的點(diǎn)：

1. fetch 默認(rèn)不發(fā)送 cookies，如果需要發(fā)送，需要設(shè)置 credentials: 'include' 選項。

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

2. fetch 不會自動拒絕狀態(tài)碼為 4xx 或 5xx 的響應(yīng)，需要手動檢查 
3. fetch 不支持直接設(shè)置請求超時，需要結(jié)合 AbortController 和 setTimeout 實現(xiàn)。

fetch API 憑借其簡潔的語法和強(qiáng)大的功能，已經(jīng)成為現(xiàn)代 Web 開發(fā)中進(jìn)行網(wǎng)絡(luò)請求的首選方式。它不僅解決了傳統(tǒng) Ajax 的繁瑣問題，還提供了更多的功能和更好的靈活性。

?

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