Fetch für den Zugriff auf Daten vom Server
Die auf einen Fetch-Request folgenden Anweisungen werden ohne Pausieren direkt ausgeführt und warten nicht auf den Lesevorgang. Async await ist eine relativ junge Syntax für die Behandlung von Promise. Mittels async await bekommt der Scriptcode einen synchronen Anstrich, der einfacher lesbar und verständlicher ist.
const response = await fetch(resource[, options]);
Der Aufruf fetch() setzt eine Anfrage in Gang und gibt ein Promise zurück. Wenn der Request abgeschlossen wird, wird das Promise mit der Antwort – dem Response-Objekt – aufgelöst. Kommt es unterwegs zu Problemen, wird das Promise abgewiesen.
async function fetchList() {
const response = await fetch("books.json");
const books = await response.json();
return books;
}
fetchList ().then (books => {
books;
for (const b of books) {
document.querySelector(".books").innerHTML += b.titel + "\n";
}
})
Das Response-Objekt
response.json() ist eine Methode des Response-Objekts, die ein JSON-Objekt aus der Antwort zieht. Die Methode gibt ein Promise zurück, also muss await response.json() auf das JSON warten.
Das Response-Objekt hat mehr zu bieten als JSON – aber ebenso stets ein Promise.
- response.json()
- gibt ein JSON-Objekt zurück
- response.text()
- gibt reinen Text zurück
- response.formData()
- gibt FormData zurück
- response.blob()
- gibt ein Blob zurück (eine Art Datei-Objekt oder RAW-Daten)
- response.arrayBuffer()()
- gibt ein ArrayBuffer zurück (Binärdaten)
Fetch Error
Gäbe es die JSON-Datei books.json im Beispiel oben nicht, würde … nichts … passieren. Nichts – weder eine Fehlermeldung in der Console noch ein Fehler 404 oder ein Serverfehler.
Aus der Sicht von Fetch ist der HTTP-Request durchgeführt. Fertig. Nur wenn der Request nicht ausgeführt werden konnte, weil z.B. die Verbindung zum Server nicht hergestellt werden konnte.
Das altbekannte response.ok des HTTP-Requests trennt einen erfolgreichen on einem misslungenen HTTP-Request.
async function missingBooks () {
const response = await fetch('/missing');
if (!response.ok) {
const message = `Voll daneben: ${response.status}`;
throw new Error(message);
}
const books = await response.json();
return books;
}
missingBooks().catch(error => {
error.message;
});
Failed to load resource: the server responded with a status of 404 () /missing
Warten auf mehrere Requests
In vielen Situationen können Daten von mehr als einem Endpunkt erforderlich sein. await Promise.all([...]) setzt parallele Fetch-Requests in Gang und wartet, bis alle Anfragen erfüllt wurden.
async function fetchBooks () {
const [books, titles] = await Promise.all(
[
fetch ("books.json"),
fetch ("booktitles.json")
]
);
const countUni = await books.json();
const countAll = await titles.json();
return [countUni, countAll];
}
fetchBooks ().then (([countUni, countAll]) => {
countUni;
countAll;
console.log (countUni.length);
console.log (countAll.length);
}).catch (error => {
//
})