Fetch -Methode in JavaScript | Erklärt

Die Fetch () -Methode ist hauptsächlich mit der Verwendung der Web -Technologie (bekannt als AJAX) verbunden, die Daten mit Webservern asynchron im Hintergrund austauscht. Um AJAX einfach in die Website einzufügen, verwenden wir JQuery. Obwohl dieser Vorgang einfach ist und die Codezeilen reduziert. Dies kann jedoch zu einer zusätzlichen Ladung von 100 KB auf der Website führen.

Entwickler verwenden XMLHTTPrequest, um AJAX mit Hilfe von reinem JavaScript aufzunehmen. Es hat jedoch auch einen Nachteil, dass wir einige unnötige Dinge codieren müssen, die auch nicht gut sind. Um all diese Nachteile zu beseitigen, führte die JavaScript ES6 -Version die Fetch () -Methode ein. Mit anderen Worten, die Fetch () -Methode kann als Ersatz des Ajax bezeichnet werden.

In Anbetracht der Bedeutung der Fetch () -Methode zielt dieser Beitrag darauf ab, die folgenden Ergebnisse zu erzielen:

• Wie Fetch () -Methode in JavaScript funktioniert?
• So verwenden Sie die Fetch () -Methode in JavaScript?

Wie Fetch () -Methode in JavaScript funktioniert?

Die JavaScript Fetch () -Methode bietet uns alle Funktionen, die Ajax hat. Die Fetch () -Methode kann zum Erstellen, Abrufen, Aktualisieren und Löschen von Operationen mit dem Server verwendet werden. Bei dieser Methode ist die Codierung sehr geringer und es ist auch schnell im Vergleich zu XMLHTTPrequest. Eine weitere wichtige Sache ist, dass diese Methode auf einem Live -Server funktioniert.

Syntax
Der detaillierte Arbeitsfluss der Fetch () -Methode wird unten erläutert.

Abrufen (Datei/URL)

Die Fetch () -Methode nimmt den Dateipfad als Parameter. Wenn diese Methode ausgeführt wird, gibt sie ein Versprechen zurück (ein Versprechen ist wie ein Zustand), ein Versprechen ist entweder erfolgreich oder fehlgeschlagen.

Abrufen (Datei/URL).Dann()

Wenn das Versprechen erfolgreich ist, verwenden wir die dann () -Funktion mit der Fetch () -Methode.

Abrufen (Datei/URL).Dann (Funktion (resp_variable) return resp_variable.Daten;)

Danach erstellen wir eine Funktion, in der wir eine Antwort vom Server als Parameter innerhalb der Funktion erhalten. Der Server sendet eine Datendatei, die dann als Antwort gesendet wird.

Abrufen (Datei/URL).Dann (Funktion (resp_variable) return resp_variable.Daten;).Dann()

Die erste dann () -Funktion gibt auch ein Versprechen zurück, und dieses Versprechen wird in der zweiten dann () Funktion verwendet.

Abrufen (Datei/URL).Dann (Funktion (resp_variable) return resp_variable.Daten;).dann (Funktion (res_variable)
Konsole.log (res_variable);)

Das Ergebnis des Servers wird in der zweiten () -Funktion der Funktion des Körpers der Funktion angezeigt. Hier repräsentiert Res_Variable die Variable, die ein tatsächliches Ergebnis enthält, das dem Benutzer angezeigt wird.

Abrufen (Datei/URL).dann (Funktion (resp_variable)
return resp_variable.Daten;
).dann (Funktion (res_variable)
Konsole.log (res_variable);
).catch (function (err_variable)
Konsole.log (err_variable);
);

In der obigen Syntax, Datei/URL repräsentiert den Pfad der serverseitigen Sprachdatei. Der resp_variable bezeichnet die Antwort des Servers, wenn die Fetch -Methode den Pfad anfordert. Der res_variable repräsentiert die Variable, die die endgültige Antwort nach dem speichert resp_variable Funktion wird ausgeführt und die err_variable repräsentiert die Variable, die einen Fehler speichert, wenn er auftritt.

Die Funktion Catch () wird verwendet, um Fehler zu behandeln, wenn der Server nicht antwortet, oder die Datei, die wir senden, enthält Fehler.

So verwenden Sie die Fetch () -Methode in JavaScript?

In JavaScript nimmt die Fetch () -Methode einen Dateipfad als Parameter ein und verwendet die Funktion, um die Serverantwort zurückzugeben. Danach wird die Serverantwort erneut an den Server gesendet, der das Ergebnis zurückgibt. Lassen Sie uns die Verwendung der Fetch () -Methode durch ein praktisches Beispiel verstehen.

Code

abrufen ("FET/Lesen.txt").Dann (Funktion (r)
return r.Text();
).Dann (Funktion (res)
Konsole.log (res);
);

In diesem Code -Abrufmethode fordert die Methode eine Lektüre an.Die TXT -Datei danach dann erhält die Funktion Server die Antwort und gibt sie erneut an den Server zurück. Zuletzt verwenden wir erneut die Funktion dann (), um das Ergebnis anzuzeigen.

Ausgang

Die obige Ausgabe zeigt, dass die Fetch () -Methode a anfordert lesen.txt Datei und erhält ein erfülltes Versprechen als Gegenleistung. Danach verwendet die Funktion dann () dieses Versprechen und erhält die Serverreaktion und verwendet sie in ihrem Körper, um die Antwort zusammen mit dem zurückzugeben Text() Methode. Zuletzt die zweite Dann() Die Methode erhält das Ergebnis und zeigt den Inhalt der Lesen an.TXT -Datei.

Das sind alle Informationen zu der Fetch () -Methode in JavaScript. Sie haben die Arbeit und Verwendung der Fetch () -Methode in JavaScript verstanden.

Abschluss

In JavaScript wird die Fetch () -Methode verwendet, um CRUD -Operationen wie Insertion, Upgradation, Lesen und Löschen von Daten vom Server durchzuführen. Dazu stellt die Fetch () -Methode eine Anforderung an den Server, und die erforderlichen Daten werden auf der Webseite auf der Genehmigung der Anforderung geladen. Dieses beschreibende Handbuch enthält detaillierte Informationen zur Arbeit und Verwendung der Fetch () -Methode in JavaScript.