JavaScriptで役立つasync/awaitテンプレ（WebDevTips#2）

こんにちは，くるみです
これまでは主に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