✅fetch と XMLHTTPRequest の違いは何ですか?-jsチュートリアル-php.cn

皆さん、こんにちは！興味深いプロジェクトに取り組んでいるときに、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 の場合) でしたが、とにかく当時のことでした。

それで、違いは何ですか？

それで、違いについての質問に戻りますが、最も重要な違いはすでに歴史の中に隠されています。XMLHTTPRequest は古いながらもサポートされている API であり、fetch はそれを置き換える新しい API にすぎないからです。現在、XMLHTTPRequest 2.0 は 2012 年 1 月にリリースされましたが、1.0 標準の最新版は同年 12 月にリリースされました。これがこのオブジェクトの現在の標準です。しかし今、これをいつも書いていた開発者の顔を想像してみてください:

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

ログイン後にコピー

これの代わりに

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

ログイン後にコピー

数年前。すぐに思い浮かぶのはそれだけです。

✅What is the difference between fetch and XMLHTTPRequest?

しかし真剣に、ここに違いの短いリストを示します:

Promise 指向: Fetch API は Promise を使用するため、非同期コードの操作が容易になり、.then() や async and await などの便利な構造を使用できるようになります。
簡素化されたインターフェイス: Fetch API の構文はよりシンプルで直感的です。たとえば、リクエストを行う場合、XHR の場合のように、オブジェクトを作成してそのプロパティを設定する必要はありません。
新機能のサポート: Fetch API は、リクエスト、レスポンス、およびそれらの変換を操作するための便利なメソッドを提供する、リクエストオブジェクトやレスポンスオブジェクトなどの新機能をサポートします。
ストリームのサポート: Fetch API はストリーミングデータをサポートしているため、受信した大量のデータを処理できます。
リクエストのキャンセル: Fetch API にはリクエストのキャンセルのサポートが組み込まれていませんが、中止コントローラーを使用してリクエストをキャンセルすることができ、リクエストの管理がより柔軟になります。
カスタマイズの改善: Fetch API には、ヘッダー、キャッシュモード、その他のパラメーターの設定など、リクエストを構成するためのオプションが追加されました。
cors サポート: Fetch API は、CORS (Cross-Origin Resource Sharing) と連携する際の柔軟性を高め、他のドメインからのリソースへのリクエストをより柔軟に構成できます。
エラー処理の改善: Fetch API を使用する場合、リクエストエラー (ネットワークが利用できないなど) は Promise を拒否しますが、4xx または 5xx コードによる成功した応答は拒否されないため、応答ステータスをより適切に処理できます。拒否する場合は、ステータスコードを自分で確認する必要があります。

✅What is the difference between fetch and XMLHTTPRequest?
これはもちろん私ではありませんが、ただのクールな写真です

そして、もちろん、他にも多くの違いがありますが、今それらを列挙することに意味はないと思います。なぜなら、すべての点から見て、これが最新のブラウザ要件に合わせた古い標準の単なる改良版であることは明らかだからです。

あとがき

最初は、fetch が新しい標準であるということを 1 行書こうと思ったのですが、実際にはそれを伝えることができる素晴らしいものがたくさんあるのに、それは単純すぎて情報が少なくなります。 fetch だけで記事を 1 つ書くこともできますが、この記事には特に意味はありません。しかし、全体的には、私の意見では、すべてがうまくいっているようです。

記事をお読みいただきありがとうございます!