Funktion mit fetch() soll kein Promise, sondern Daten liefern

[Rolf B]

Hallo ebody,

Wenn man load_1() aufruft, soll die Funktion direkt die Daten und kein Promise liefern. Wie kann man das machen?

Gar nicht. Fetch ist asynchron, das wirst Du nicht los.

const json = await response.json();
// Daten zurückgeben
return await json.data;

Öhm, der await für json.data ist unnötig. response.json() interpretiert das Request-Ergebnis als JSON-String und macht ein Objekt daraus. Damit ist die Asynchronität am Ende.

Für das Promise bleibt Dir nur

const data1a = await load_1('https://reqres.in/api/users/');
console.log('data1a',data1a); // => Promise

Wenn dieser Code auf dem Top-Level läuft, haut JS ihn Dir um die Ohren. Top-Level await ist nur in ECMAScript-Modulen zulässig. Das hat Konsequenzen:

• Der strikte Modus wird aktiviert
• Wenn das Script extern ist, wird es mit defer geladen (d.h. asynchron geladen und direkt vor dem Triggern des DOMContentLoaded-Events ausgeführt)
• Top-Level Variablen sind nicht mehr global, sondern nur im Modul global.

Wenn das für deinen Code passt (oder dein Code passend gemacht werden kann), dann füge deinem Script-Statement ein type="module" hinzu und der Top-Level await ist möglich.

Alternative B ist das Einkapseln des ganzen Steuerung in eine weitere async-Funktion. Da geht immer ein await.

Alternative C ist

load_1('https://reqres.in/api/users/')
.then(data1a => console.log('data1a',data1a));

console.log("Huhu, hier bin ich!");

Wichtig ist bei .then, dass der Code im then erst läuft, wenn Fetch fertig ist. Der Huhu-Log wird hingegen ausgegeben, während der Fetch noch busy ist.

await ist Syntaxzucker, der einfach den ganzen Rest einer Funktion in einen then-Callback umwandelt.

Rolf