JavaScript のトップレベルの Async/Await に課題があるのはなぜですか?また、それらはどのように克服できるのでしょうか?

トップレベルでの Async/Await の利用

JavaScript プログラミングでは、async/await を使用すると、非同期コードを同期と同様の方法で実行できます。やり方。ただし、トップレベルで async/await を使用すると、特定の動作が直観に反しているように見える可能性があるため、問題が発生する可能性があります。トップレベルの async/await が課題となる理由を詳しく見てみましょう。

動作を理解する

デフォルトでは、すべての async 関数は Promise を返します。指定したコード スニペット内:

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

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

コンソール出力は、非同期関数内のメッセージが関数外のログ メッセージの後に実行されることを示しています。これは、main 関数が解決された値ではなく Promise を返すために発生します。その結果、コンソールは解決された値の代わりに Promise オブジェクトを記録します。

課題の克服

トップレベルで async/await を効果的に利用するには、次のことができます。次の戦略を採用します:

1.モジュール内のトップレベルの Await (提案)

この提案では、モジュールのトップレベルで直接 await を使用できます。ただし、待機中の Promise が解決されるまで、モジュールの読み込みはブロックされます。

2.決して拒否しないトップレベルの非同期関数

決して拒否しないトップレベルの非同期関数を作成できます。この場合、async ブロック内のコードは常に実行されますが、潜在的な例外またはエラーの処理を考慮する必要があります。

3. .then() と .catch() を使用する

このアプローチにより、async 関数によって返された Promise を明示的に処理できます。 .then() を使用して履行を処理し、.catch() を使用して拒否を処理できます。

実装例

モジュール内のトップレベルの待機

// This requires the top-level await proposal
const text = await main();
console.log(text);

トップレベル決して拒否しない非同期関数

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

.then() と .catch() を使用する

main()
    .then(text => {
        console.log(text);
    })
    .catch(err => {
        console.error('Error:', err);
    });

これらのテクニックを採用することで、効果的に次のことができます。トップレベルで async/await を使用し、潜在的な例外を処理しながらコードが意図したとおりに実行されるようにします。エラー。

以上がJavaScript のトップレベルの Async/Await に課題があるのはなぜですか?また、それらはどのように克服できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。