JavaScriptのasync awaitについて解説します

投稿日：2018年12月17日

こんにちは、mabuiです。
今回は自分の備忘録も兼ねてJavaScriptのasync awaitについてまとめていきます。

はじめに

async awaitは、非同期処理を簡潔に行うことができるJavaScriptの構文です。
非同期処理とは処理の結果を待たずに次の処理に移る仕組みのことで、
反対に同期処理とはプログラムが記述された通り順に実行される処理のことです。

async awaitの使い方

async awaitを使用する場合、非同期処理を実行する関数をasync function宣言で定義します。
async function | MDN

async function hoge() {
  return 'hoge'
}

async function hoge() {

return 'hoge'

}

このasync functionは呼び出されることでPromiseオブジェクトを返却します。

// Promise {<resolved>: "hoge"}
console.log(hoge())

// Promise {<resolved>: "hoge"}

console.log(hoge())

async functionで値がreturnされた場合はPromiseオブジェクトのステータスはresolved、エラーが発生した場合にはrejectedを返却します。

async function hoge() {
  throw new Error('hoge')
}

// Promise {<rejected>: Error: hoge
console.log(hoge())

async function hoge() {

throw new Error('hoge')

}

// Promise {<rejected>: Error: hoge

console.log(hoge())

Promiseオブジェクトとは、非同期処理の途中の状態を表すオブジェクトで、
awaitを使用することで非同期処理が終わるまで待機し、結果を取得することができます。
awaitはasync function内でしか使用できません。

async function hoge() {
  return 'hoge'
}

async function fuga() {
  const result = await hoge()
  console.log(result)
}

// hoge
fuga()

async function hoge() {

return 'hoge'

}

async function fuga() {

const result = await hoge()

console.log(result)

}

// hoge

fuga()

ES6でのforEachの注意点

jsのforEachはasync/await機能しなくなるんですねー
かなりハマりました。

— mabui@ハビットチェーンエンジニア (@mabui_x) 2018年12月13日

async/awaitを、Array.prototype.forEachで使う際の注意点、という話
こちらの記事を参考にしましたが、forEach内部のコールバック関数を呼ぶ処理でawaitが使用されていないため、非同期処理の結果を待つことなく、処理が継続されてしまいます。(検証バージョン：node v10.9.0)