Fetch API vs XMLHttpRequest

Ich weiß, dass die Fetch-API Promises verwendet und beide es Ihnen ermöglichen, AJAX-Anforderungen an einen Server zu senden.

Ich habe gelesen, dass die Fetch-API einige zusätzliche Funktionen enthält, die in XMLHttpRequest(und in der Fetch-API-Polyfüllung, da sie auf basiert XHR) nicht verfügbar sind .

Welche zusätzlichen Funktionen bietet die Fetch-API?

Es gibt einige Dinge, die Sie mit Fetch und nicht mit XHR tun können:

• Sie können die Cache-API mit den Anforderungs- und Antwortobjekten verwenden.
• Sie können durchführen no-cors Anforderungen und eine Antwort von einem Server erhalten, der CORS nicht implementiert. Sie können nicht direkt über JavaScript auf den Antworttext zugreifen, aber Sie können ihn mit anderen APIs (z. B. der Cache-API) verwenden.
• Streaming-Antworten (mit XHR wird die gesamte Antwort im Speicher gepuffert, mit Fetch können Sie auf den Low-Level-Stream zugreifen). Dies ist noch nicht in allen Browsern verfügbar, wird aber bald verfügbar sein.

Es gibt einige Dinge, die Sie mit XHR tun können, die Sie mit Fetch noch nicht tun können, die jedoch früher oder später verfügbar sein werden (lesen Sie den Abschnitt "Zukünftige Verbesserungen" hier: https: //hacks.mozilla .org / 2015/03 / this-api-is-so-fetching / ):

• Eine Anfrage abbrechen (dies funktioniert jetzt in Firefox und Edge, wie @sideshowbarker in seinem Kommentar erklärt);
• Fortschritt melden.

Dieser Artikel https://jakearchibald.com/2015/thats-so-fetch/ enthält eine detailliertere Beschreibung.

holen

• Fehlen einer integrierten Methode zum Konsumieren von Dokumenten
• Es gibt noch keine Möglichkeit, eine Zeitüberschreitung festzulegen
• Der Inhaltstyp-Antwortheader kann nicht überschrieben werden
• Wenn der Header für die Inhaltslänge vorhanden, aber nicht verfügbar ist, ist die Gesamtlänge des Körpers während des Streamings unbekannt
• ruft den Abbruch-Handler des Signals auf, auch wenn die Anforderung abgeschlossen wurde
• Kein Upload-Fortschritt (Unterstützung für ReadableStreamInstanzen als Anforderungskörper steht noch aus )

XHR

• Es gibt keine Möglichkeit, keine Cookies zu senden (abgesehen von der Verwendung des nicht standardmäßigen mozAnonFlags oder des AnonXMLHttpRequestKonstruktors).
• FormDataInstanzen können nicht zurückgegeben werden
• hat kein Äquivalent zu fetch's no-corsModus
• Folgen Sie immer den Weiterleitungen

Die obigen Antworten sind gut und bieten gute Einblicke, aber ich teile die gleiche Meinung wie in diesem Blogeintrag von Google-Entwicklern , da der Hauptunterschied (aus praktischer Sicht) die Bequemlichkeit des eingebauten Versprechens ist, von dem zurückgegeben wirdfetch

Anstatt Code wie diesen schreiben zu müssen

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

Wir können Dinge aufräumen und etwas schreiben, das mit Versprechungen und moderner Syntax etwas prägnanter und lesbarer ist

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