Verwenden der JavaScript-Fetch-API zum Abrufen von Daten

Einführung

Es gab eine Zeit, als XMLHttpRequest verwendet wurde, um API-Anfragen zu erstellen. Es enthielt keine Promises und sorgte nicht für einen sauberen JavaScript-Code. Mit jQuery verwendeten Sie die saubere Syntax mit jQuery.ajax().

Jetzt verfügt JavaScript über eine eigene integrierte Möglichkeit, API-Anfragen zu erstellen. Dies ist die Fetch-API, ein neuer Standard, um Serveranfragen mit Promises zu erstellen, der aber noch viele andere Funktionen enthält.

In diesem Tutorial erstellen Sie mit der Fetch-API sowohl GET- als auch POST-Anfragen.

Voraussetzungen

Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

• Auf Ihrem Rechner installierte neueste Version von Node. Zur Installation von Node unter macOS folgen Sie den im Tutorial Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung unter macOS beschriebenen Schritten.
• Ein grundlegendes Verständnis der Programmierung in JavaScript, über das Sie in der Reihe Programmieren in JavaScript mehr erfahren können.
• Ein Verständnis von Promises in JavaScript. Lesen Sie den Abschnitt Promises dieses Artikels über die Ereignisschleife, Callbacks, Promises und async/await in JavaScript.

Schritt 1 — Erste Schritte mit der Fetch-API-Syntax

Um die Fetch-API zu verwenden, rufen Sie die Methode fetch auf, die die URL der API als Parameter akzeptiert:

fetch(url)

Fügen Sie nach der Methode fetch() die Promise-Methode then() ein:

.then(function() {

})

Die Methode fetch() gibt ein Promise zurück. Wenn das zurückgegebene Promise resolve ist, wird die Funktion innerhalb der Methode then() ausgeführt. Diese Funktion enthält den Code für die Handhabung der von der API empfangenen Daten.

Fügen Sie unter der Methode then() die Methode catch() ein:

.catch(function() {

});

Die API, die Sie mit fetch() aufrufen, kann außer Betrieb sein oder es können andere Fehler auftreten. Wenn dies geschieht, wird das Promise reject zurückgegeben. Die Methode catch wird verwendet, um reject zu handhaben. Der Code innerhalb von catch() wird ausgeführt, wenn ein Fehler beim Aufruf der API Ihrer Wahl auftritt.

Zusammengefasst sieht die Verwendung der Fetch-API wie folgt aus:

fetch(url)
.then(function() {

})
.catch(function() {

});

Mit einem Verständnis der Syntax zur Verwendung der Fetch-API können Sie nun mit der Verwendung von fetch() für eine echte API fortfahren.

Schritt 2 — Verwenden von Fetch zum Abrufen von Daten aus einer API

Die folgenden Codebeispiele basieren auf der Random User API. Mithilfe der API erhalten Sie zehn Benutzer und zeigen sie auf der Seite mit Vanilla JavaScript an.

Die Idee ist, alle Daten von der Random User API zu erhalten und in Listenelementen innerhalb der Liste des Autors anzuzeigen. Beginnen Sie mit der Erstellung einer HTML-Datei und dem Hinzufügen einer Überschrift und einer ungeordneten Liste mit der id der authors:

<h1>Authors</h1>
<ul id="authors"></ul>

Fügen Sie nun script-Tags am Ende Ihrer HTML-Datei und verwenden Sie einen DOM-Selektor zum Ergreifen von ul. Verwenden Sie getElementById mit authors als Argument. Denken Sie daran: authors ist die id für die zuvor erstellte ul:

<script>

	const ul = document.getElementById('authors');
	
</script>

Erstellen Sie eine konstante Variable namens url, die die API enthält, die zehn zufällige Benutzer zurückgibt:

const url = 'https://randomuser.me/api/?results=10';

Mit erstellten ul und url ist es an der Zeit, die Funktionen zu erstellen, die zur Erstellung der Listenelemente verwendet werden. Erstellen Sie eine Funktion namens createNode, die einen Parameter namens element aufnimmt:

function createNode(element) {

}

Wenn createNode später aufgerufen wird, müssen Sie den Namen eines tatsächlichen HTML-Elements übergeben, das erstellt werden soll.

Fügen Sie innerhalb der Funktion eine Anweisung return hinzu, die element unter Verwendung von document.createElement() zurückgibt:

function createNode(element) {
	return document.createElement(element);
}

Sie müssen auch eine Funktion namens append erstellen, die zwei Parameter aufnimmt: parent und el:

function append(parent, el) {

}

Diese Funktion fügt el an parent mit document.createElement an:

function append(parent, el) {
	return parent.appendChild(el);
}

Sowohl createNode als auch append sind einsatzbereit. Rufen Sie nun mit der Fetch-API die Random User API unter Verwendung von fetch() mit url als Argument auf:

fetch(url)

fetch(url)
  .then(function(data) {

    })
  })
  .catch(function(error) {

  });

Im obigen Code rufen Sie die Fetch-API auf, und übergeben die URL an die Random User API. Dann wird eine Antwort empfangen. Die Antwort, die Sie erhalten, ist jedoch nicht JSON, sondern ein Objekt mit einer Reihe von Methoden, die je nachdem, was Sie mit den Informationen tun möchten, verwendet werden können. Um das zurückgegebene Objekt in JSON zu konvertieren, verwenden Sie die Methode json().

Fügen Sie die Methode then() hinzu, die eine Funktion mit einem Parameter namens resp enthält:

fetch(url)
.then((resp) => )

Der Parameter resp nimmt den Wert des von fetch(url) zurückgegebenen Objekts an. Verwenden Sie die Methode json(), um resp in JSON-Daten zu konvertieren:

fetch(url)
.then((resp) => resp.json())

Die JSON-Daten müssen noch verarbeitet werden. Fügen Sie eine weitere Anweisung then() mit einer Funktion hinzu, die ein Argument namens data aufweist:

.then(function(data) {

	})
})

Erstellen Sie innerhalb dieser Funktion eine Variable namens authors, die gleich data.results gesetzt wird:

.then(function(data) {
	let authors = data.results;

Sie sollten für jeden Autor in authors ein Listenelement erstellen, das ein Bild und den Namen des Autors anzeigt. Dafür eignet sich die Methode map() hervorragend:

let authors = data.results;
return authors.map(function(author) {

})

Erstellen Sie innerhalb Ihrer Funktion map eine Variable namens li, die gleich createNode mit li (dem HTML-Element) als Argument gesetzt wird:

return authors.map(function(author) {
	let li = createNode('li');
})

Wiederholen Sie dies, um ein Element span und ein Element img zu erstellen:

let li = createNode('li');
let img = createNode('img');
let span = createNode('span');

Die API bietet einen Namen für den Autor und ein Bild, das zu diesem Namen gehört. Setzen Sie img.src auf das Bild des Autors:

let img = createNode('img');
let span = createNode('span');
		
img.src = author.picture.medium;

Das Element span sollte den Vor- und Nachnamen des author enthalten. Mit der Eigenschaft innerHTML und der String-Interpolation können Sie dies tun:

img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;

Mit dem Bild und dem Listenelement, die zusammen mit dem Element span erstellt wurden, können Sie die zuvor erstellte Funktion append verwenden, um diese Elemente auf der Seite anzuzeigen:

append(li, img);
append(li, span);
append(ul, li);

Da beide Funktionen then() abgeschlossen sind, können Sie nun die Funktion catch() hinzufügen. Diese Funktion protokolliert den potenziellen Fehler auf der Konsole:

.catch(function(error) {
  console.log(error);
});

Dies ist der vollständige Code der von Ihnen erstellten Anfrage:

function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  let authors = data.results;
  return authors.map(function(author) {
    let li = createNode('li');
    let img = createNode('img');
    let span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = `${author.name.first} ${author.name.last}`;
    append(li, img);
    append(li, span);
    append(ul, li);
  })
})
.catch(function(error) {
  console.log(error);
});

Sie haben gerade erfolgreich eine GET-Anfrage mit der Random User API und der Fetch-API durchgeführt. Im nächsten Schritt lernen Sie, wie Sie POST-Anfragen ausführen.

Schritt 3 — Handhaben von POST-Anfragen

Fetch ist standardmäßig auf GET-Anfragen eingestellt, doch Sie können auch alle anderen Arten von Anfragen verwenden, die Kopfzeilen ändern und Daten senden. Dazu müssen Sie Ihr Objekt festlegen und als zweites Argument der Funktion fetch übergeben.

Erstellen Sie vor der Erstellung einer POST-Anfrage die Daten, die Sie an die API senden möchten. Dies wird ein Objekt namens data mit dem Schlüssel name und dem Wert Sammy (oder Ihrem Namen) sein:

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sammy'
}

Stellen Sie sicher, dass Sie eine konstante Variable einfügen, die den Link der Random User API enthält.

Da es sich um eine POST-Anfrage handelt, müssen Sie dies explizit angeben. Erstellen Sie ein Objekt namens fetchData:

let fetchData = {

}

Dieses Objekt muss drei Schlüssel enthalten: method, body und headers. Der Schlüssel method sollte den Wert 'POST' haben. body sollte gleich dem gerade erstellten Objekt data gesetzt werden. headers sollte den Wert von new Headers() haben:

let fetchData = {
  method: 'POST',
  body: data,
  headers: new Headers()
}

Die Schnittstelle Headers ist eine Eigenschaft der Fetch-API, mit der Sie verschiedene Aktionen für HTTP-Anfragen und Antwort-Header durchführen können. Wenn Sie mehr darüber erfahren möchten, finden Sie in diesem Artikel namens Definieren von Routen und HTTP-Anfragemethoden in Express weitere Informationen.

Mit diesem Code kann die POST-Anfrage unter Verwendung der Fetch-API erstellt werden. Sie schließen url und fetchData als Argumente für Ihre POST-Anfrage fetch ein:

fetch(url, fetchData)

Die Funktion then() enthält Code, der die vom Random User API-Server empfangene Antwort verarbeitet:

fetch(url, fetchData)
.then(function() {
    // Handle response you get from the server
});

Es gibt auch eine andere Möglichkeit zur Erstellung eines Objekts und der Verwendung der Funktion fetch(). Anstatt ein Objekt wie fetchData zu erstellen, können Sie den Anfragekonstruktor verwenden, um Ihr Anfrageobjekt zu erstellen. Erstellen Sie dazu eine Variable namens request:

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request =

Die Variable request sollte gleich new Request gesetzt werden. Das Konstrukt new Request nimmt zwei Argumente an: die API-URL (url) und ein Objekt. Das Objekt sollte auch die Schlüssel method, body und headers enthalten, genau wie fetchData:

var request = new Request(url, {
	method: 'POST',
	body: data,
	headers: new Headers()
});

Jetzt kann request als einziges Argument für fetch() verwendet werden, da es auch die API-URL enthält:

fetch(request)
.then(function() {
    // Handle response we get from the API
})

Insgesamt sieht Ihr Code wie folgt aus:

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request = new Request(url, {
	method: 'POST',
	body: data,
	headers: new Headers()
});

fetch(request)
.then(function() {
    // Handle response we get from the API
})

Jetzt kennen Sie zwei Methoden zur Erstellung und Ausführung von POST-Anfragen mit der Fetch-API.

Zusammenfassung

Obwohl die Fetch-API noch nicht von allen Browsern unterstützt wird, ist sie eine gute Alternative zu XMLHttpRequest. Wenn Sie lernen möchten, wie Sie Web-APIs mit React aufrufen, lesen Sie diesen Artikel zu diesem Thema.