async await vs. fetch

[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