JavaScript Promise および async / await の使い方(非同期処理を同期処理にする)

2025/01/18

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/08/29

JavaScript Promise および async / await の使い方(非同期処理を同期処理にする)

Promise の使い方して以下の記事を書きましたが、今回は Promise を返す関数を同期的に処理するための async / await の使い方の記事を書いてみます。

⇒JavaScript Promiseの使い方(非同期処理に関連して)
⇒JavaScript Promiseの使い方２(非同期処理に関連して)

あらためて、Promise を使用した関数ですが、以下のものを使用します。

■Promise を使用した関数例

// Promise を返す関数の宣言
function test_callback(timeoutval) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve(timeoutval);
        }, timeoutval);
    });
}

この関数は setTimeout を使ってタイムアウトした時に resolve で指定された関数を実行します。
それではこの関数を使用してみます。

// テスト
test_callback(1000).then((data) => {
    console.log('callback...OK:' + data);
});
// test_callback()をCALLした直後にコンソール出力
console.log('test_callback:実行');

これを実行すると以下のものがコンソール出力されます。

test_callback:実行		// 先にこのメッセージが表示
callback...OK:1000

2行目のメッセージは test_callback 内のタイムアウトが終わってからの表示となります。これを逆順で表示させたい場合（ソース上の順番通り）には async / await を使うことになります。

■async / await を使って同期処理を行う

公式サイトには async / await の説明が以下の様にあります。

async function 宣言は非同期関数を宣言し、その中で await キーワードを使うことができます。
async および await キーワードを使用することで、プロミスベースの非同期の動作を、
プロミスチェーンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。

この説明によれば、非同期関数の宣言には「function」宣言の前に「async」を付けて関数宣言を行い、 Promise ベースの非同期の動作の前に「await」を付けることで、Promise ベースの非同期の動作を待つことができるようです。

上記の実行部分を1個の関数として以下の様に async / await を使って宣言します。

async function sample_callback() {
	// テスト
    await test_callback(1000).then((data) => {
        console.log('callback...OK:' + data);
    });
	// test_callback()をCALLした直後にコンソール出力
    console.log('test_callback:実行');
}

この関数を実行すると、結果としてコンソールには以下の出力が行われます。

callback...OK:1000
test_callback:実行		// 後からこのメッセージが表示

await で宣言した部分の実行が終わってから、最後のコンソール出力が実行されました。

ここで await の処理を複数行う様にしてみます。

async function sample_callback() {
	// テスト1
    await test_callback(1000).then((data) => {
        console.log('callback...OK:' + data);
    });
	// テスト2
    await test_callback(2000).then((data) => {
        console.log('callback...OK:' + data);
    });
	// テスト3
    await test_callback(3000).then((data) => {
        console.log('callback...OK:' + data);
    });
	// 最後のコンソール出力
    console.log('最後のコンソール出力');
}

これを実行すると、以下のコンソール出力が実行されました。

callback...OK:1000
callback...OK:2000
callback...OK:3000
最後のコンソール出力

同期的に順次処理が行われていることが分かります。
今回の例では実際の処理として setTimeout を使ったタイマ待ちで、タイムアウト時の処理を行わせていますが、実用的な処理においても、いろんな機能のメソッドの処理終了時にコールバック関数を呼ぶものがります。
この場合にも Promise で処理関数を宣言し、それを呼出す関数を async / await で行えば、同期的に処理が行われるので、ソース的には上から下への流れに記述できると思います。

VB.NET-TIPS などプログラミングについて

■Promise を使用した関数例

■async / await を使って同期処理を行う

関連する記事

コメント