ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。