So verwenden Sie die Fetch -API in JavaScript

In der Webentwicklung müssen Sie häufig andere Webserver herstellen/kommunizieren, um Informationen/Daten zu erhalten. Wenn Sie sich beispielsweise auf einigen Websites für ein neues Konto anmelden. Auf diese Weise können Sie sich für ein neues Konto mit nur einem einzigen Klick anmelden, anstatt das gesamte Formular manuell auszufüllen. Wenn Sie die Option „Anmelden mit einem Drittanbieterkonto anmelden“ auswählen, kommuniziert die Anwendung mit dem Server der Drittanbieter -Anwendung und sendet eine Anfrage zum Zugriff auf Ihre dort gespeicherten Informationen. Diese Anfrage wird über API gesendet, bei denen es sich um eine Reihe von Regeln handelt, die regeln, wie unterschiedliche Anwendungen oder Systeme miteinander kommunizieren. In diesem Artikel lernen wir, JavaScript zu verwenden, um solche Anfragen zu senden.

Was ist die Fetch -API?

Fetch API bietet eine einfache bringen() Methode in JavaScript, die zum Abrufen, Zugriff auf und zum Manipulieren von Ressourcen im gesamten Netzwerk verwendet wird. Der bringen() Mit der Methode können Sie asynchrone JavaScript- und XML -Aufrufe (AJAX) mit JavaScript machen. Die asynchronen Anfragen werden parallel zum Hauptprogramm ausgeführt und stoppen nicht die Ausführung des darunter liegenden Code. Der Code unterhalb der API -API -Anfrage wird weiter ausgeführt, auch wenn die API keine Antwort zurückgesandt hat. Wenn die API auf den Ajax -Anruf antwortet, dann der bringen() Die Methode wird wieder aufgenommen.

Fetch API verwendet Versprechungen und bietet leistungsstarke Funktionen, die es viel einfacher machen, Webanforderungen und deren Antworten zu bearbeiten. Es ist eine großartige Möglichkeit, Callback -Höllen zu vermeiden, die bei der Verwendung von XMLHTTPrequest erstellt wurden.

Notiz: Die Browserkonsole wird zur Demonstration von Beispielen in diesem Artikel verwendet.

Die Syntax der Fetch -API in JavaScript

Wir müssen das anrufen bringen() Methode, um die Fetch -API in unserem JavaScript -Code zu verwenden. Der bringen() Methode nimmt die URL der API als Argument.

abrufen (URL)

Wir müssen das definieren Dann() Methode nach der bringen() Methode:

.dann (function ()
)

Der zurückgegebene Wert der bringen() Methode ist ein Versprechen. Wenn dieses Versprechen gelöst wird, ist der Code im Körper des vorhandenen Code Dann() Methode wird ausgeführt. Der Körper des Dann() Die Methode sollte den Code enthalten, der die von der API gesendeten Daten verarbeiten kann.

Wir müssen dann das definieren fangen() Methode; Die fangen() Methode wird nur ausgeführt, falls das Versprechen abgelehnt wird:

.catch (function ()
);

Alles in allem bringen() Methode sollte ungefähr so ​​aussehen:

abrufen (URL)
.dann (function ()
)
.catch (function ()
);

Nachdem wir die Syntax der Fetch -API verstehen, können wir nun zu den Beispielen der realen Welt für die Verwendung des Fetchs übergehen() Methode auf einer echten API.

So verwenden Sie die Fetch -Methode, um Daten von einer API zu erhalten

In diesem Beispiel verwenden wir die API eines GitHub -Benutzers, um die Benutzerinformationsdaten zu erhalten und sie mit nur Vanille -JavaScript auf der Konsole anzuzeigen. Also lasst uns anfangen:

Erstens werden wir eine Variable genannt URL; Diese Variable enthält die URL der API, die die Repos eines benannten Benutzers zurückgibt Fabot:

const url = 'https: // api.Github.com/user/fabpot/repos ';

Jetzt werden wir das verwenden bringen() Methode zum Aufrufen der GitHub -Benutzer -API;

abrufen (URL)

Der bringen() Die Methode nimmt die URL als Argument:

abrufen (URL)
.Dann (Funktion (Daten)
)
)
.catch (Funktion (Fehler)
);

In dem oben angegebenen Code haben wir die Fetch -API aufgerufen, um die Repositorys eines Benutzers benannt zu erhalten Fabot Aus Github. Wir haben die URL an die GitHub -Benutzer -API als Argument zum Abrufen von API übergeben. Die API sendet dann eine Antwort zurück, die ein Objekt mit einer Reihe von Methoden ist. Diese Methoden können verwendet werden, um verschiedene Funktionen für die empfangenen Informationen auszuführen. Wenn wir das Objekt in JSON umwandeln wollen, können wir die JSON () -Methode verwenden.

Um das Objekt in JSON umzuwandeln, müssen wir das hinzufügen Dann() Methode. Der Dann() Die Methode enthält eine Funktion; Die Funktion nimmt ein Argument namens Antwort auf:

abrufen (URL)
.Dann ((Antwort) =>)

Der Antwortparameter wird verwendet, um das von der API zurückgegebene Objekt zu speichern. Dieses Objekt wird unter Verwendung der JSON () -Methode in JSON -Daten konvertiert:

abrufen (URL)
.Dann ((Antwort) => Antwort.JSON ())

Jetzt können wir die Daten in Form von JSON ausgeben, indem wir ein weiteres Hinzufügen hinzufügen Dann() Stellungnahme; Diese Anweisung enthält eine Funktion, die eine Variable mit dem Namen Daten als Argument nimmt:

.Dann (Funktion (Daten)
)
)

Wir verwenden dann die Konsole.log () Methode im Körper der Funktion, um die Daten auf die Konsole auszugeben.

.Dann (Funktion (Daten)
Konsole.Logdaten);
)

Jetzt werden wir die Funktion catch () hinzufügen, um den potenziellen Fehler in der Konsole zu protokollieren, falls das Versprechen unerfüllt ist:

.catch (err
Konsole.Fehler (err);
);

Alles in allem die Anfrage, eine Liste der Repositories des Benutzers von GitHub zu erhalten, sollte ungefähr so ​​aussehen:

abrufen (URL)
.Dann ((Antwort) => Antwort.JSON ())
.Dann ((Daten) =>
Konsole.Logdaten);
)
.catch (err
Konsole.Fehler (err);
);

In dem oben angegebenen Screenshot wurde das Versprechen gelöst und der Körper der .Dann() Methode wurde ausgeführt. Wenn das Versprechen aus irgendeinem Grund ungelöst geblieben wäre, dann der Körper des .fangen() Methode wäre ausgeführt worden, die den gesamten Fehlerbehandlungen ausführen würde. Wir haben gerade das benutzt .fangen() Methode zum Drucken einer Fehlermeldung für den Fall, dass das Versprechen unerfüllt ist.

Abschluss

Das Kommunizieren und Abnehmen von Daten aus Quellen Dritter ist ein wesentlicher Bestandteil der Webentwicklung. Es wurde durch die Verwendung eines komplexen Tools mit dem Namen XMLHTTPREQUEST erreicht, das Callback -Höllen verursachte; Jetzt wird ein viel einfacheres Werkzeug namens Fetch API verwendet, um Ajax -Anrufe in Vanille -JavaScript zu senden, da es bei der Behandlung der AJAX -Anfragen viel besser ist. In diesem Beitrag haben wir gelernt, die Fetch -API -Methode zu verwenden, um Ajax -Anrufe in Vanille JavaScript zu tätigen.