async await vs. fetch

[Konrad]

Hallo,

prinzipielle Frage... ...Ich habe eine Funktion, die per Klick ausgelöst wird. Darin fetche ich data, die ich in einer .then Schleife ins DOM anhänge. Das ist die einzige Aufgabe dieser Funktion. Muss ich diese Funktion als async deklarieren? Also

async fetchFunktion() {...}

und dann in der Funktion

await fetch(...).then(...).catch(...)

? In DIESEM Fall machen async await doch eigentlich keinen Sinn oder?

Danke, Konrad.

[Rolf B]

Hallo Konrad,

await fetch(...).then(...).catch(...)

Nein, so nicht. Entweder await oder then. Es mag Konstrukte geben, wo man das sinnvoll mischt, aber das muss dann schon ein technischer Spezialgrenzfall sein,

async/await ist letztlich Sytaxzucker für Promises mit .then. Vorteil von then ist, dass man keine async-Funktion erstellen muss und den Code auch "einfach so" laufen lassen kann. Nachteil ist die kompliziertere Programmstruktur mit Callbacks.

function getData(url) {
   fetch(url)
   .then(response => response.ok ?
                         response.text() :
                         Promise.reject(response.statusText))
   .then(text => /* Text ins DOM stellen */)
   .catch(error => /* Fehlerbehandlung */
}

async function getDataAsync(url) {
   let response = await fetch(url);
   if (response.ok) {
     let text = await response.text();
     // Text ins DOM stellen
   }
   else {
     // Fehlerbehandlung 
   }
}

tut FAST beides das Gleiche.

Die async-Funktion liefert wiederum ein Promise zurück, allerdings eins, das zu undefined resolved, weil die Funktion kein return-Statement enthält. Aber du kannst drauf warten, dass sie fertig ist.

Die nicht-async-Funktion tut das nicht, dafür müsstest Du "return fetch ..." schreiben.

Und ich finde, die Fehlerbehandlung in der await-Version ist lesbarer.

Rolf