Warum funktioniert Async/Await auf oberster Ebene in JavaScript nicht und wie kann ich das Problem beheben?

Async/await auf der obersten Ebene verwenden

Frage:

Warum passiert Folgendes Code nicht Arbeit?

async function main() {  
    var value = await Promise.resolve('Hey there');
    console.log('inside: ' + value);
    return value;
}

var text = main();  
console.log('outside: ' + text);

Antwort:

Der Grund, warum der Code nicht funktioniert, ist, dass main ein Versprechen zurückgibt. Alle asynchronen Funktionen geben Versprechen zurück.

Um async/await auf der obersten Ebene zu verwenden, gibt es drei Optionen:

1. Top-Level-Await in Modulen:

In ES2022 kann Top-Level-Await in Modulen verwendet werden. Dadurch können Sie die Wait-Syntax oben im Modul verwenden. Der Ladevorgang des Moduls wird jedoch erst abgeschlossen, wenn das von Ihnen erwartete Versprechen erfüllt ist. Wenn das Versprechen abgelehnt wird, kann das Modul nicht geladen werden.

const text = await main();
console.log(text);

2. Asynchrone Funktion der obersten Ebene, die niemals ablehnt:

Verwenden Sie eine asynchrone Funktion der obersten Ebene, die niemals ablehnt (es sei denn, Sie möchten „unbehandelte Ablehnungsfehler“):

(async () => {
    try {
        const text = await main();
        console.log(text);
    } catch (e) {
        // Handle errors
    }
})();

3. then und Catch:

Verwenden Sie .then() und .catch(), um das von main: zurückgegebene Versprechen zu verarbeiten.

main()
    .then(text => {
        console.log(text);
    })
    .catch(err => {
        // Handle errors
    });

Beachten Sie, dass alle drei Optionen die Verarbeitung von Versprechenablehnungen oder erfordern asynchrone Ausnahmen, da es keinen Aufrufer gibt, an den sie weitergeleitet werden können.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Async/Await auf oberster Ebene in JavaScript nicht und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!