✅Was ist der Unterschied zwischen fetch und XMLHTTPRequest?

Hallo zusammen! Während ich an einem interessanten Projekt arbeitete, kam mir die Idee, den Unterschied zwischen fetch und XMLHTTPRequest zu erklären. Tatsächlich klingt die Frage ziemlich interessant, wenn man die Geschichte ihrer Entstehung kennt, in dem Sinne, dass sie ein wenig falsch ist, aber man muss trotzdem darüber Bescheid wissen, denn sagen wir mal, für mich als Entwickler, wenn ich damit zu tun habe Bei allen Arten von APIs im Alltag ist es nützlich, dies zu wissen, um keinen unnötigen Code zu erstellen.

Was ist XMLHTTPRequest und eine kurze Geschichte seiner Entstehung?

In Javascript werden XMLHttpRequest-Objekte zur Interaktion mit Servern verwendet. Sie können Daten von einer URL abrufen, ohne eine vollständige Seitenaktualisierung durchführen zu müssen. Dadurch kann eine Webseite nur einen Teil einer Seite aktualisieren, ohne die Aktivitäten des Benutzers zu beeinträchtigen. Aber im Allgemeinen handelt es sich, um es ganz klar auszudrücken, um eine API. Und wenn wir das hören, erinnern wir uns sofort an die Konzepte der Ereignisschleife, der Asynchronität (wenn die Codeausführung nach einer bestimmten Zeit abgeschlossen wird) usw. Code, der XMLHTTPRequest verwendet, sieht beispielsweise so aus:

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

Die Entstehungsgeschichte von XMLHTTPRequest selbst führt uns zurück in die fernen Jahre, als die Dinosaurier wandelten ... Okay, nur ein Scherz. Tatsächlich wurde diese API zuerst von Microsoft entwickelt und in der Outlook im Web-Komponente des Microsoft Exchange Server-Softwareprodukts 2000 eingeführt.

Damals hieß es anders – IXMLHTTPRequest und war, wenn man das so sagen kann, in den ersten Versionen der Schnittstelle ein wenig anders als heute. Das heißt, die Basis blieb offensichtlich erhalten, aber es ist offensichtlich, dass über 25 Jahre hinweg Anpassungen vorgenommen wurden. Später wurde es zu MSXML 2.0 und noch später zu Internet Explorer 5 im März 1999 hinzugefügt.

Dann entwickelten Mozilla-Programmierer ihre eigene Version der API basierend auf IXMLHTTPRequest, die dann nsIXMLHttpRequest hieß, und machten sie über unser beliebtes XMLHttpRequest zugänglich. All dies wurde im Dezember 2000 zu Gecko Version 0.6 hinzugefügt (Gecko ist eine Browser-Engine, die in Firefox und vielen anderen Orten verwendet wird). Damals gab es so etwas wie FireFox noch nicht, denn die erste Version erschien im September 2002 und hieß Phoenix, dann FireBird und erst 2004 FireFox. Vor all dem gab es dann den Netscape Navigator, aber die Konfrontation mit dem Internet Explorer und das war’s – das ist eine andere Geschichte, die in diesem Artikel nicht näher beschrieben werden soll. Später wurde die Unterstützung für Safari, Opera und andere Browser hinzugefügt. Wenn also Leute sagen, dass dieses Objekt zur Kompatibilität mit alten Browsern verwendet wird, dann haben sie natürlich Recht, denn es führt uns in die späten 90er Jahre, als die Webentwicklung gerade erst in der Entwicklung war. Sie können sich sogar an die Zeit der Dotcom-Blase erinnern, aber zugegebenermaßen war es etwas früher oder zu dieser Zeit (wenn wir den Internet Explorer nehmen), aber jedenfalls war es damals.

Was ist also der Unterschied?

Um auf die Frage nach dem Unterschied zurückzukommen: Der wichtigste Unterschied ist bereits in der Geschichte verborgen, denn XMLHTTPRequest ist nur eine alte, aber unterstützte API und fetch ist nur eine neue API, die sie gewissermaßen ersetzt. Stand heute: XMLHTTPRequest 2.0 wurde im Januar 2012 veröffentlicht, die neueste Ausgabe des Standards 1.0 wurde jedoch im Dezember desselben Jahres veröffentlicht. Dies ist der aktuelle Standard für dieses Objekt. Aber stellen Sie sich nun die Gesichter der Entwickler vor, die dies die ganze Zeit geschrieben haben:

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

Stattdessen

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

vor ein paar Jahren. Das ist das Einzige, was mir sofort in den Sinn kommt.

Aber im Ernst, hier ist eine kurze Liste der Unterschiede:

1. Versprechensorientiert: Die Fetch-API verwendet Versprechen, was die Arbeit mit asynchronem Code erleichtert und Ihnen die Verwendung praktischer Konstrukte wie .then() und async andawait ermöglicht.

2. Vereinfachte Schnittstelle: Die Fetch-API verfügt über eine einfachere und intuitivere Syntax. Um beispielsweise Anfragen zu stellen, müssen Sie kein Objekt erstellen und seine Eigenschaften festlegen, wie es bei XHR der Fall ist.

3. Unterstützung für neue Funktionen: Die Fetch-API unterstützt neue Funktionen wie Request- und Response-Objekte, die praktische Methoden für die Arbeit mit Anfragen, Antworten und deren Transformationen bieten.

4. Unterstützung für Streams: Die Fetch-API unterstützt Streaming-Daten, sodass Sie beim Empfang mit großen Datenmengen arbeiten können.

5. Abbrechen von Anforderungen: Obwohl die Fetch-API keine integrierte Unterstützung für das Abbrechen von Anforderungen bietet, können Sie dazu den Abbruch-Controller verwenden, was die Verwaltung von Anforderungen flexibler macht.

6. Verbesserte Anpassung: Die Fetch-API bietet mehr Optionen zum Konfigurieren von Anforderungen, z. B. das Festlegen von Headern, Caching-Modi und anderen Parametern.

7. cors-Unterstützung: Die Fetch-API bietet mehr Flexibilität bei der Arbeit mit CORS (Cross-Origin Resource Sharing), was eine flexiblere Konfiguration von Anforderungen an Ressourcen aus anderen Domänen ermöglicht.

8. Bessere Fehlerbehandlung: Wenn Sie mit der Fetch-API arbeiten, können Sie Antwortstatus besser handhaben, da ein Anforderungsfehler (z. B. Netzwerk nicht verfügbar) das Versprechen ablehnt, während dies bei einer erfolgreichen Antwort mit einem 4xx- oder 5xx-Code nicht der Fall ist Lehnen Sie es ab und Sie müssen den Statuscode selbst überprüfen.

Das bin natürlich nicht ich, aber es ist einfach ein cooles Bild

Und natürlich gibt es noch viele weitere Unterschiede, aber ich sehe keinen Sinn darin, sie jetzt aufzulisten, denn bei allen Parametern ist klar, dass es sich lediglich um eine verbesserte Version des alten Standards für moderne Browseranforderungen handelt.

Nachwort

Zuerst dachte ich, dass ich eine Zeile schreiben sollte, die besagt, dass fetch ein neuerer Standard ist, aber das wäre zu einfach und wenig informativ, obwohl es dort tatsächlich viele coole Dinge gibt, die erzählt werden könnten. Sie können einen ganzen Artikel allein über das Abrufen schreiben, aber in diesem Artikel geht es nicht um einen besonderen Punkt. Aber insgesamt scheint meiner Meinung nach alles in Ordnung zu sein.

Vielen Dank für das Lesen des Artikels!

P.S.

Übrigens war dieses Projekt HMPL. Es handelt sich um eine kleine Vorlagensprache zum Anzeigen der Benutzeroberfläche vom Server zum Client. Es wäre toll, wenn Sie dieses Projekt mit einem Stern bewerten könnten. Danke!

Star HMPL

Das obige ist der detaillierte Inhalt von✅Was ist der Unterschied zwischen fetch und XMLHTTPRequest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!