阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

小編精選 - 技術文章翻譯 · 02月18日

fetch 和 XMLHTTPRequest 有什麼不同？ ⚙️

大家好！在從事一個有趣的專案時，我有一個想法來講述fetch和XMLHTTPRequest之間的差異。事實上，如果你知道它的建立歷史，這個問題聽起來很有趣，從某種意義上說，它有點不正確，但你仍然需要了解它，因為，對於我作為一名開發人員來說，當我每天處理各種 API 時，了解它很有用，以免建立不必要的程式碼。

📖 什麼是 XMLHTTPRequest 以及它的簡要歷史

在javascript中， XMLHttpRequest物件用於與伺服器互動。您可以從 URL 檢索資料，而不必刷新整個頁面。這使得網頁能夠僅更新頁面的一部分，而不會幹擾使用者正在執行的操作。但整體來說，說白了它就是一個API。當我們聽到這個時，我們立即想起了事件循環，非同步（程式XMLHTTPRequest執行將在一定時間後完成）等概念。

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

XMLHTTPRequest本身的建立歷史將我們帶回恐龍行走的遙遠年代……好吧，開個玩笑。事實上，這個API最早是由微軟開發的，並在Microsoft Exchange Server軟體2000產品的Web上的Outlook元件中引進。

老佩佩

那時，它被命名為IXMLHTTPRequest ，並且，如果可以這樣說的話，在介面的第一個版本中，它與現在的略有不同。也就是說，基礎顯然保留了下來，但 25 年來顯然做出了調整。後來，它被加入到 MSXML 2.0 中，更晚的又於 1999 年 3 月被加入到 Internet Explorer 5 中。

然後，Mozilla 程式設計師基於IXMLHTTPRequest開發了他們自己的 API 版本，然後稱為nsIXMLHttpRequest ，並透過我們心愛的XMLHttpRequest使其可存取。所有這些都在 2000 年 12 月加入到 Gecko 0.6 版本中（Gecko 是 FireFox 和許多其他地方使用的瀏覽器引擎）。那時還沒有 FireFox 這個名字，因為它的第一個版本於 2002 年 9 月發布，被稱為 Phoenix，然後是 FireBird，直到 2004 年才改名為 FireFox。然後，在這一切之前，有 Netscape Navigator，但與 Internet Explorer 的對抗就是這樣 - 那是另一個故事，在本文中寫它是沒有意義的。隨後，又增加了對Safari、Opera等瀏覽器的支援。所以當人們告訴你這個物件是為了相容於舊的瀏覽器時，那麼他們當然是對的，因為它把我們帶到了 90 年代末，當時 Web 開發才剛開始發展。您甚至還記得網路泡沫的時代，但不可否認的是，它要早一點，或者在那個時候（如果我們使用 Internet Explorer），但無論如何它就是那時。

👀 那麼有什麼差別呢？

因此，回到關於差異的問題，最重要的差異已經隱藏在歷史中，因為XMLHTTPRequest只是一個舊的但受支援的 API，而fetch只是一種新的 API，它取代了它。截至今天， XMLHTTPRequest 2.0於2012年1月發布，但最新版本的1.0標準於同年12月發布。這是該物件的當前標準。但現在想像一下一直寫這段程式碼的開發人員的表情：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData', true);

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('There was a network error.');
};

xhr.send();

而不是這個

fetch('/api/getData')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

幾年前。這是我立刻想到的唯一一件事。

但說實話，以下是一些差異的簡短清單：

承諾導向： Fetch API 使用承諾，這使得使用非同步程式碼變得更容易，並允許您使用諸如.then()和async和await類的便捷構造。
簡化的介面： Fetch API 具有更簡單、更直覺的語法。例如，要發出請求，您不需要像 XHR 那樣建立物件並設定其屬性。
支援新功能： Fetch API 支援 Request 和 Response 物件等新功能，它們為處理請求、回應及其轉換提供了便捷的方法。
支援流程： Fetch API 支援流資料，讓您在收到大量資料時進行處理。
取消請求：雖然 Fetch API 沒有內建對取消請求的支持，但您可以使用中止控制器來執行此操作，這使得管理請求更加靈活。
改進的客製化： Fetch API 提供了更多用於配置請求的選項，例如設定標頭、快取模式和其他參數。
cors支援： Fetch API 在使用 CORS（跨域資源共享）時提供了更大的靈活性，允許更靈活地配置對來自其他網域的資源的請求。
更好的錯誤處理：使用 Fetch API 時，您可以更好地處理回應狀態，因為請求錯誤（例如網路不可用）將拒絕承諾，而帶有 4xx 或 5xx 程式碼的成功回應不會拒絕它，您需要自行檢查狀態程式碼。