So holen Sie Daten von einer API in JavaScript ab

Beim Erstellen einer realen Anwendung in JavaScript muss die Anwendung mit interagieren Apis Daten senden und empfangen. In JavaScript gibt es viele Möglichkeiten, mit einer API zu interagieren, aber die häufigste und grundlegendste Art, mit einer API zu interagieren, besteht darin Bringen() Methode aus der API holen vom Browser bereitgestellt. In diesem Beitrag lernen wir, wie man Daten von a bekommt Mock -API Verwenden von Vanille -JavaScript und der Fetch -API.

Die Fetch () -Methode

Diese Methode wird verwendet, um Daten von jeder API zu sammeln, die auf die Anfrage eines Kunden in Form von JSON oder XML reagiert. Die Syntax der Fetch -Methode ist ziemlich einfach, sondern nur ein obligatorisches Argument und einen optionalen Parameter als

Abrufen (URL, Optionen);

• URL: Die URL der API zu erreichen und um eine Antwort in Form von zu verlangen JSON oder Xml
• Optionen: optionale Parameter, mit denen wir die Anfrage aus ändern können "erhalten" Zu "Post" und andere Varianten
• Notiz: Die Fetch -Methode gibt ein Versprechen zurück

Um die Fetch () -Methode in Ihrem JavaScript zu verwenden. Mit der asynchrieigen Funktion wird die Syntax definiert als

Async Function Function_identifier (url)
const response = wartet avetch (URL);
var data = wartete die Antwort.JSON ();

Abrufen von Daten aus einer API unter Verwendung der Fetch () -Methode in JavaScript

Um die Fetch () -Methode zum Abrufen von Daten aus einer API zu testen, benötigen Sie eine Dummy -API oder eine Schein -API. Zu diesem Zweck verwenden wir die Dummy -API von bereitgestellt von Req | res mit der URL “https: // reqres.in/api/produkte/3”.

Das zweite, was wir brauchen, ist ein grundlegendes Verständnis dafür, wie Versprechen Arbeiten Sie in JavaScript, um sich über Versprechungen in JavaScript zu informieren. Sie können diesen Link besuchen.

Als nächstes brauchen wir eine Dummy -HTML -Seite mit einigen grundlegenden Elementen darin. In diesem Beispiel haben wir die folgenden Zeilen in der HTML verwendet:

Daten aus API abrufen

Dies sollte uns die folgende Webseite geben:

Für den JavaScript -Code müssen wir als erstes die URL in einer separaten Variablen mit der folgenden Zeile speichern:

const url = "https: // reqres.in/api/products/3 ";

Dann definieren wir eine Asynchronisierungsfunktion Um die Daten von der API zu erhalten, verwenden Sie die URL Wir haben gerade mit den folgenden Zeilen gespeichert:

asynchrische Funktion getDatafromapi (url)
const response = wartet avetch (URL);
var data = wartete die Antwort.JSON ();
Konsole.Logdaten);

Was wir in diesem Code tun, ist, dass wir auf a warten versprechen von dem abrufen (URL) und dieses Versprechen im Inneren des Versprechens zu speichern Antwort Variable.

Sobald wir das Versprechen erhalten haben, müssen wir es mit dem JSON -Format in das JSON -Format umwandeln Antwort.JSON (). Seit Antwort.JSON () ist auch ein Versprechen, das Daten zurückgibt. Wir verwenden das Keyword erwarten.

Zuletzt drucken wir die von der API abgerufenen Daten mit der Konsolenprotokollfunktion aus.

Jetzt müssen wir nur noch eine asynchronisierte Funktion nennen und die URL der API mit der folgenden Zeile übergeben:

getDatafromapi (URL);

Der komplette Code -Snippet lautet:

const url = "https: // reqres.in/api/products/3 ";
asynchrische Funktion getDatafromapi (url)
const response = wartet avetch (URL);
var data = wartete die Antwort.JSON ();
Konsole.Logdaten);

getDatafromapi (URL);

Wenn Sie diese Webseite ausführen und in den Entwicklertools des Browsers zur Konsole gehen, sehen Sie die folgende Ausgabe:

Das ist es, Sie haben Daten aus einer API mit JavaScript erfolgreich abgerufen.

Abschluss

Der bringen() Methode aus der API holen kann verwendet werden, um Daten von einem abzurufen API In Vanille JavaScript. Wenn Sie mit realen Anwendungen arbeiten, müssen Sie wissen, wie Sie mit einer API interagieren, um Daten zu senden und zu empfangen. In diesem Beitrag haben wir die Fetch () -Methode überschritten, um eine Rückkehr an eine Schein -API zu senden und Daten aus dieser API zu erhalten, und diese Daten dann mit Hilfe von Versprechen in JSON umgewandelt, damit sie in unserer Anwendung verwendet werden kann.