ホームページ >ウェブフロントエンド >jsチュートリアル >非同期関数が確実に順番に実行されるようにするにはどうすればよいですか?
非同期関数をシーケンスする方法
当面のタスクは、ある関数が実行を開始する前に、ある関数が実行を完了するようにすることです。提供されたコードでは、firstFunction() は SecondFunction() 内で呼び出されますが、呼び出し元は、続行する前に firstFunction() が終了するまで SecondFunction() を待機することを意図しています。
コールバック関数アプローチ
非同期コードをシーケンスするための一般的な手法の 1 つは、コールバック関数を使用することです。コールバックを使用したコードの改訂版は次のとおりです。
<code class="javascript">function firstFunction(callback) { // Asynchronous operations go here. // When operations complete, invoke the callback function. callback(); } function secondFunction() { firstFunction(() => { // Code that should execute after firstFunction() completes. }); }</code>
この例では、firstFunction() はコールバック関数を引数として受け取ります。 firstFunction() の非同期操作が完了すると、コールバック関数が呼び出され、完了したことが SecondFunction() に事実上通知されます。
アロー関数の構文
新しいアプローチアロー関数を使用しています:
<code class="javascript">firstFunction(() => console.log('Done!'));</code>
この構文は、firstFunction() の完了時に目的のアクションを実行するアロー関数 (=> で表される) を使用することでコールバック関数を簡素化します。
Async/Await
より現代的で包括的なアプローチは、async/await を使用することです。このメソッドでは、関数を非同期として定義し、await キーワードを使用して Promise が解決されるまで実行を一時停止します。
<code class="javascript">const firstFunction = async () => { // Asynchronous operations go here. return Promise.resolve(); // Return a promise that resolves when operations complete. }; const secondFunction = async () => { await firstFunction(); // Code that should execute after firstFunction() completes. };</code>
firstFunction() で、戻り値 Promise.resolve() は、次の時点で解決されることを示します。非同期操作が完了しました。 SecondFunction() の await キーワードにより、続行する前に firstFunction() の Promise が解決されるまで待機することが保証されます。
async/await の利点の 1 つは、コールバックと比較してコードの可読性が向上し、よりクリーンなエラー処理であることです。
以上が非同期関数が確実に順番に実行されるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。