【JavaScript】Promiseとasync,awaitを利用した非同期処理を同期的に扱うサンプル
setTimeoutを使って処理に時間のかかる非同期処理を疑似的に表現して、その戻り値をasync,awaitを使い同期的に処理するという簡単なサンプルです。
サンプルは、いつ返ってくるかわからない2つの数値（10と20）の和を求めるというプログラムです。
目次
1. サンプルプログラム
関数get10は、1秒後に10をresolveします。（時間のかかる非同期処理その1）
関数get20は、2秒後に20をresolveします。（時間のかかる非同期処理その2）
関数calcは、関数get10と関数get20がresolveした数値（10と20）の和をreturnします。
関数calcは、asyncキーワードがついているため関数内部でawaitキーワードが使えます。
関数calc内で呼び出される関数get10と関数get20はそれぞれawaitキーワードを使います。
await付きで呼び出された関数はresolveされるまでその位置で処理を待ちます。
変数n10とn20にはそれぞれresolveされた数値10と20が代入されます。
関数calcはn10とn20の和をreturnします。
関数calcがreturnしているのは、見た目、数値30をreturnしているように見えますが、関数calcにはasyncが付与されているのでPromiseオブジェクトがreturnされます。 （asyncが付与された関数の戻り値はPromiseオブジェクトです。）
変数proには、関数calcから返されるPromiseオブジェクトが代入されています。
最終的に、pro.then((data)=>{})のdataに関数calcが計算した数値30が代入されています。
2. async関数のポイント
asyncを付与した関数のポイントとしては、その関数内部でawaitが使えるということ。
async関数内でawaitを使って呼び出された関数は、その処理が非同期にもかかわらず、その位置で値がresolveされるまで待つ。
async関数内でawaitを使って呼び出された関数の戻り値は、resolveされた値（数値など）がそのまま返される。（Promiseオブジェクトではないので注意！）
数値などの値が返されるので、それを変数に代入して計算などでそのまま利用できる。
asyncを付与した関数のreturn値は、Promiseオブジェクト。
async,awaitを使った関数は、その動作が直感的ではないのでPromiseの使い方と合わせてある程度の慣れが必要。