✅What is the difference between fetch and XMLHTTPRequest?

皆さん、こんにちは！興味深いプロジェクトに取り組んでいるときに、fetch と XMLHTTPRequest の違いについて説明することを思いつきました。実際、この質問は、少し間違っているという意味で、その作成の歴史を知っていれば非常に興味深いように思えますが、それでもそれについて知っておく必要があります。日々さまざまな API を使用するため、不要なコードを作成しないように知っておくと役立ちます。

XMLHTTPRequest とは何か、およびその作成の簡単な歴史

JavaScript では、XMLHttpRequest オブジェクトを使用してサーバーと対話します。ページ全体を更新しなくても、URL からデータを取得できます。これにより、Web ページは、ユーザーの作業を中断することなく、ページの一部だけを更新できます。しかし、一般的に言って、率直に言って、それは API です。これを聞くと、イベント ループ、非同期 (コードの実行が一定時間後に完了する) などの概念がすぐに思い出されます。たとえば、XMLHTTPRequest を使用するコードは次のようになります。

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

XMLHTTPRequest 自体の作成の歴史は、恐竜が歩いていた遠い昔に遡ります。まあ、冗談です。実際、この API は Microsoft によって最初に開発され、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 や他の多くの場所で使用されるブラウザ エンジンです)。最初のバージョンが 2002 年 9 月にリリースされ、Phoenix、次に FireBird、そして 2004 年までに FireFox と呼ばれていたため、当時は FireFox などというものはありませんでした。そして、このすべての前に Netscape Navigator がありましたが、Internet Explorer との対立とそれだけです - それはまた別の話であり、この記事で書く意味はありません。その後、Safari、Opera、その他のブラウザにサポートが追加されました。したがって、このオブジェクトは古いブラウザとの互換性のために使用されていると言われると、もちろんそれは正しいのです。Web 開発がまだ発展途上だった 90 年代後半の話になるからです。ドットコム バブルの頃のことさえ覚えているかもしれませんが、確かにそれはもう少し前、あるいは当時 (Internet Explorer の場合) でしたが、とにかく当時のことでした。

So what's the difference?

So, returning to the question about the difference, the most important difference is already hidden in history, because XMLHTTPRequest is just an old, but supported API, and fetch is just a new API, which kind of replaces it. As of today, XMLHTTPRequest 2.0 was released in January 2012, but the latest edition of 1.0 standard was released in December of the same year. This is the current standard for this object. But now imagine the faces of the developers who wrote this all the time:

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();

instead of this

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);
    });

a few years ago. That's the only thing that comes to mind right away.

But seriously, here is a short list of differences:

1. Promise-oriented: The Fetch API uses promises, which makes it easier to work with asynchronous code and allows you to use convenient constructs like .then() and async and await.

2. Simplified interface: The Fetch API has a simpler and more intuitive syntax. For example, to make requests, you don’t need to create an object and set its properties, as is the case with XHR.

3. Support for new features: The Fetch API supports new features such as Request and Response objects, which provide convenient methods for working with requests, responses, and their transformations.

4. Support for streams: The Fetch API supports streaming data, which allows you to work with large amounts of data as it is received.

5. Canceling requests: Although the Fetch API does not have built-in support for canceling requests, you can use the abort controller to do so, which makes managing requests more flexible.

6. Improved customization: The Fetch API provides more options for configuring requests, such as setting headers, caching modes, and other parameters.

7. cors support: The Fetch API provides more flexibility in working with CORS (Cross-Origin Resource Sharing), which allows for more flexible configuration of requests to resources from other domains.

8. Better error handling: When working with the Fetch API, you can better handle response statuses, since a request error (e.g. network unavailable) will reject the promise, while a successful response with a 4xx or 5xx code will not reject it, and you will need to check the status code yourself.

This is of course not me, but it's just a cool picture

当然，还有更多差异，但我不认为现在列出它们有什么意义，因为从所有参数来看，很明显这只是针对现代浏览器要求的旧标准的改进版本。

后记

一开始我想写一行来说明 fetch 是一个较新的标准，但它太简单而且信息量不大，而事实上那里有很多很酷的东西可以告诉。你可以单独写一篇关于fetch的文章，但是这篇文章没有什么特别的点。但总的来说，在我看来，一切似乎都很好。

非常感谢您阅读这篇文章！

P.S.

顺便说一句，这个项目是HMPL。它是一种小型模板语言，用于从服务器到客户端显示 UI。如果您能给这个项目评分，那就太好了。谢谢！

明星HMPL

The above is the detailed content of ✅What is the difference between fetch and XMLHTTPRequest?. For more information, please follow other related articles on the PHP Chinese website!