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

一、傳統(tǒng) Ajax 的繁瑣

首先，讓我們回顧一下傳統(tǒng) Ajax 的實(shí)現(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('請(qǐng)求失敗，狀態(tài)碼：', xhr.status);
    }
  }
};
xhr.onerror = function() {
 console.error('請(qǐng)求出錯(cuò)');
};
xhr.send();

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

二、fetch API 的簡(jiǎn)潔之美

相比之下，使用 fetch API 可以大大簡(jiǎn)化這一過程：

這段代碼使用了 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. 簡(jiǎn)單的請(qǐng)求配置

fetch API 允許通過第二個(gè)參數(shù)對(duì)象來配置請(qǐng)求：

3. 流式處理

fetch API 返回的是一個(gè) Response 對(duì)象，它提供了多種處理響應(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)變得非常靈活。

四、中斷請(qǐng)求

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

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

五、注意事項(xiàng)

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

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

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

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

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