Maison >interface Web >js tutoriel >Pourquoi l'Async/Await de niveau supérieur ne fonctionne-t-il pas en JavaScript et comment puis-je y remédier ?

Pourquoi l'Async/Await de niveau supérieur ne fonctionne-t-il pas en JavaScript et comment puis-je y remédier ?

DDD
DDDoriginal
2024-12-07 10:05:17797parcourir

Why Doesn't Top-Level Async/Await Work in JavaScript and How Can I Fix It?

Utilisation d'async/await au niveau supérieur

Question :

Pourquoi ce qui suit code pas fonctionne ?

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

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

Réponse :

La raison pour laquelle le code ne fonctionne pas est parce que main renvoie une promesse. Toutes les fonctions asynchrones renvoient des promesses.

Pour utiliser async/await au niveau supérieur, il existe trois options :

1. Attente de niveau supérieur dans les modules :

Dans ES2022, l'attente de niveau supérieur peut être utilisée dans les modules. Cela vous permet d'utiliser la syntaxe d'attente en haut du module. Cependant, le module ne terminera pas son chargement tant que la promesse que vous attendez ne sera pas réglée. Si la promesse est rejetée, le module ne pourra pas se charger.

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

2. Fonction asynchrone de niveau supérieur qui ne rejette jamais :

Utilisez une fonction asynchrone de niveau supérieur qui ne rejette jamais (sauf si vous souhaitez des erreurs de "rejet non géré") :

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

3. then et catch :

Utilisez .then() et .catch() pour gérer la promesse renvoyée par main :

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

Notez que les trois options nécessitent de gérer les rejets de promesse ou exceptions asynchrones, car il n'y a aucun appelant à qui les transmettre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn