web-dev-qa-db-ja.com

Fetch APIとXMLHttpRequestの違いは何ですか？

Fetchはpromiseを使用していることを知っており、どちらもサーバーへのAJAXリクエストを行うことができます。フェッチにはいくつかの追加機能があり、XMLHttpRequest（およびXHRに基づいているため、フェッチポリフィル）では使用できないということを読んだことがあります。フェッチAPIにはどのような追加機能がありますか？

javascriptajaxxmlhttprequestfetch-api
126
ilyabasiuk

XHRではなくフェッチでできることがいくつかあります。

  • Cache APIを要求オブジェクトと応答オブジェクトで使用できます。
  • no-cors要求を実行して、CORSを実装していないサーバーから応答を取得できます。 JavaScriptから直接応答本文にアクセスすることはできませんが、他のAPI（キャッシュAPIなど）で使用できます。
  • ストリーミング応答（XHRを使用すると、応答全体がメモリにバッファリングされます。フェッチを使用すると、低レベルのストリームにアクセスできます）。これはまだすべてのブラウザで利用できるわけではありませんが、まもなく利用可能になります。

XHRでできることはまだフェッチではできませんが、遅かれ早かれ利用できるようになります（「今後の改善点」の段落をご覧ください： https：/ /hacks.mozilla.org/2015/03/this-api-is-so-fetching/ ）：

  • リクエストを中止します（これは、FirefoxとEdgeで機能します。@ sideshowbarkerがコメントで説明しています）。
  • 進捗状況を報告します。

この記事 https://jakearchibald.com/2015/thats-so-fetch/ には、より詳細な説明が含まれています。

93
Marco

fetch

  • ドキュメントを消費する組み込みメソッドがありません
  • タイムアウトを設定する方法がない まだ
  • content-type応答ヘッダーをオーバーライドできません
  • content-length応答ヘッダーが存在するが公開されていない場合、ストリーミング中に本文の全長は不明です
  • リクエストが完了すると、シグナルの中止ハンドラーevenを呼び出します

XHR

  • cookieを送信するnot方法はありません（ 非標準のmozAnonフラグ またはAnonXMLHttpRequestコンストラクターを使用することは別として）
  • FormDataインスタンスを返すことができません
  • fetchのno-corsモードに相当するものはありません
  • 常にリダイレクトに従う
47
Knu

上記の答えは優れており、良い洞察を提供しますが、主な違いは（実用的な観点から）組み込みの利便性であるという点で、これと同じ意見を共有しています google developers blog entryfetchから返された約束

このようなコードを書く代わりに

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

物事を整理して、約束と最新の構文でもう少し簡潔で読みやすいものを書くことができます

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });
6
Felipe