Fetch APIとXMLHttpRequest

Fetch APIはを使用してPromiseおり、どちらもサーバーへのAJAXリクエストを可能にすることを知っています。

Fetch APIにはいくつかの追加機能があり、それらはXMLHttpRequest（およびに基づいているため、Fetch APIポリフィルでは）使用できないことを読んだことがありますXHR。

Fetch APIにはどのような追加機能がありますか？

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

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

XHRでできることは、フェッチではまだできないものがありますが、そのうち利用できるようになります（「今後の改善」の段落を参照してください：https：//hacks.mozilla .org / 2015/03 / this-api-is-so-fetching /）：

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

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

フェッチ

• ドキュメントを消費するための組み込みメソッドがありません
• タイムアウトを設定する方法はまだありません
• content-type応答ヘッダーを上書きできません
• content-lengthレスポンスヘッダーは存在するが公開されていない場合、ストリーミング中に本文の全長は不明です
• 要求が完了した場合でも、シグナルの中止ハンドラを呼び出します
• アップロードの進行なし（ReadableStreamリクエストボディがまだ来ていないため、インスタンスのサポート）

XHR

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

上記の答えは優れているとの良好な洞察を提供していますが、私はこの内の共有と同じ意見を共有するGoogleの開発者がブログエントリ（実用的な観点から）主な違いは、内蔵の約束から返されたの利便性であることにfetch

このようなコードを書く必要はありません

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) => { ... });