結論としては、await
を必ずしも指定する必要はありません。(main1関数、main2関数でも同じ結果)
await
をasync function
に付与することで同期的に処理を書くことができます。
つまりawait
をつけることでasync function
の返り値であるPromiseの中身をそのままプログラム中に記述できるようになります。Promiseに関してはこちらをご参照ください。
これは例えばPromise<string>
という返り値の関数があったときawait
を記述することでその関数の返り値をstring
で扱えるようになるということです。
大雑把に言えば、非同期関数を実行するとPromise
という欲しい返り値を格納する箱が作られ、それが関数の結果として返されます。非同期関数はその名の通りいつ処理が完了するか分からない関数なのです。
なので特殊な型でラップして扱うようになっているわけです。例えばPromise
には同期できたら~するというようなメソッドthen()
や、非同期処理中に失敗したら~するメソッドcatch()
など非同期を扱えるようにしてくれているわけです。
同期できたら〜という文脈ではawait
を使うことができるわけです。
ただしawait
してしまうと通常の順次実行と同じように実行の完了がない限り処理が進まないわけです。
非同期処理というのは重い処理だから非同期処理になっているという理由が多々あります(ネットワークI/O, バッチ処理など)。
なので無闇矢鱈にawait
してしまうとその間にいろいろなことができるのに処理を止めてしまうなんてことになったりします。
というわけでそういう非同期の旨味を利用したいときにはthen()
で書くと良いかと思います!
一応サンプルを記載しましたのでご確認ください!dummyAsyncFunction
は1秒後に引数の文字列の末尾に!を付け足した文字列を返す非同期関数です。
// 出力: $ call api! → 他の処理です
async function main1() {
const res = await functionA1();
console.log(res);
console.log("他の処理です")
}
// 出力: $ 他の処理です → call api by awaiting!
async function main2() {
functionA2().then(res => console.log(res));
console.log("他の処理です")
}
async function functionA1() {
return dummyAsyncFunction("call api");
}
async function functionA2() {
return await dummyAsyncFunction("call api by awaiting")
}
async function dummyAsyncFunction(message) {
return new Promise(resolve => {
setTimeout(() => {
resolve(message + "!")
}, (1000));
});
}