✅fetch 和 XMLHTTPRequest 有什么区别？-js教程-PHP中文网

皆さん、こんにちは！興味深いプロジェクトに取り組んでいるときに、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 に導入されました。

✅What is the difference between fetch and XMLHTTPRequest?

当時、それは 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.

✅What is the difference between fetch and XMLHTTPRequest?

But seriously, here is a short list of differences:

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.
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.
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.
Support for streams: The Fetch API supports streaming data, which allows you to work with large amounts of data as it is received.
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.
Improved customization: The Fetch API provides more options for configuring requests, such as setting headers, caching modes, and other parameters.
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.
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.

✅What is the difference between fetch and XMLHTTPRequest?
This is of course not me, but it's just a cool picture