JavaScriptのasync・awaitを使ったサンプルコード

プログラミング

JavaScriptでは、通常は非同期処理となり、重い関数が終わるまで待つということをせず、次の関数に先に制御が移ってしまいます。
そのため、API呼び出しやIO(ファイルの読み書きやDBの読み書き)を伴う関数を呼び出した後に、その結果を元に次の処理を行う、というフローを行うためには一工夫必要です。

これを簡単に書くために、JavaScriptにはasync/awaitという文法が用意されています。
この記事では、非同期処理のサンプルコードと、async/awaitを用いて同期処理にするサンプルコードを用意しているので、そのサンプルコードを読めば使い方は理解できると思います。

async/awaitを使う上での注意点として、promiseやresolveとセットで使う必要があるという点があります。
これをセットで使用しないと、同期処理にならない、待った後の処理が実行できない、等のバグになります。
async/awaitはpromiseオブジェクトを簡単に扱うための文法でもあるので、promiseについては別途Webで調べるとより理解が深まると思います。

【サンプルコード(非同期処理)】

【処理結果(非同期処理)】

【サンプルコード(同期処理)】

【処理結果(同期処理)】


いかがでしたでしょうか。

JavaScriptのフレームワークを使いこなすには、まずJavaScript自体のことについて知る必要があります。
JavaScriptでは意識してコードを書かないと非同期処理になってしまうので、ここは意外と落とし穴になるのではないかと思っています。

コメント

タイトルとURLをコピーしました