Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

JavaScriptで役立つasync/awaitテンプレ(WebDevTips#2)

こんにちは,ココア(@cocoa_folio)です.
これまでは主に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の仕様を説明していきます.
まず,並列処理を行いたい関数makeRequestprocessRequestを用意します.
(関数名はなんでも構いません)

これらの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のような直列化をたったの1行で施すことができます.

async/awaitを使うときには,エラー処理としてtry catchを使うことが通例なので覚えておきましょう!

参考文献

JavaScript Async Await : https://www.youtube.com/watch?v=V_Kr9OSfDeU

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?