こんにちは，くるみです
これまでは主にpythonに触れてきましたが，最近Javascriptを勉強し始めたので，Webエンジニアを目指す方々へのtipsとして記事を書いていきたいと思います．
前回の記事はこちら▼
前回に引き続き，今回はasync/awaitについて説明していきます！
#async/awaitとは
Promiseと一緒に用いられることの多い__async/await__
asyncとawaitって一体なんでしょう？
Googleで「async await」と調べてみると...
#####asyncとは
非同期関数 — AsyncFunction オブジェクトである関数を定義します。非同期関数はイベントループを介して他のコードとは別に実行され、結果として暗黙の Promise を返します。ただし、非同期関数を使用したコードの構文および構造は、通常の同期関数と似たものになります。
#####awaitとは
async function によって Promise が返されるのを待機するために使用します。
となっています．
つまり，なんとなく
asyncを使うと，返り値としてPromiseを返す
awaitを使うと待機状態を作ってくれる
ということが分かります．
#コードの作成
実際のコードを見てみましょう！
サンプルコード全体
//こちらはコメントです．
//functionで関数の宣言
//Promiseの機能を持った関数"makeRequest"と"processRequest"を定義
//locationとresponseはそれぞれの関数における引数
//`${}`で文字列の中に変数の値を代入可能
function makeRequest(location){
return new Promise((resolve, reject)=>{
console.log(`Making Request to ${location}`)
if (location === 'Google'){
resolve('Google says hi')
}else{
reject('We can only talk to Google')
}
})
}
function processRequest(response){
return new Promise((resolve,reject)=>{
console.log('Processing response')
resolve(`Extra Infromation + ${response}`)
})
}
//asyncの利用
//try catchを使用
async function doWork(){
try{
const response = await makeRequest('Google')
console.log('Response Received')
const processedResponse = await processRequest(response)
console.log(processedResponse)
} catch(err){
console.log(err)
}
}
doWork()
こちらのコードをもとにasync/awaitの仕様を説明していきます．
まず，並列処理を行いたい関数__makeRequest__と__processRequest__を用意します．
（関数名はなんでも構いません）
これらのPromiseオブジェクトを処理する際には，__then__を用いて__直列接続（or並列接続）__する必要がありました．
しかし，(start)→関数→then→関数→then→関数→then→...→(goal)と繋いでいくと，__コードの見栄え__が悪くなってしまいます．（ifを何度もつなげてしまうようなイメージ...😭）
そこで，thenの代わりに使用するのが，__async/await__です！
__async/await__を使うことで，複数のPromiseオブジェクトをより簡潔に記載することができます．
##文法
サンプルコードのdoWorkを見ていきましょう．
asyncはfunctionの先頭に記載するだけで，doWork関数を__非同期関数__とすることができます
さらに，async functionの中で
const response = await makeRequest('Google')
と定義することで，makeRequest関数に__await（待機状態）__を付与することができます
待機状態が付与されると，makeRequest関数の処理が終了するまで，次に進まないため，__then__のような直列化をたったの１行で施すことができます．
async/awaitを使うときには，エラー処理としてtry catchを使うことが通例なので覚えておきましょう！
#####参考文献
JavaScript Async Await ： https://www.youtube.com/watch?v=V_Kr9OSfDeU