ブラウザアプリケーションで async/await を利用する(JavaScript)

  • 5
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

いま現在(2016.10.11)だと Babel で先取りして利用する必要があります。

$ npm install --save-dev babel-preset-es2015 babel-plugin-transform-async-to-generator babel-plugin-transform-runtime

上記 runtime のプラグインはブラウザでなく Node.js アプリケーションの場合は必要ありません。

.babelrc は次のとおり。

.babelrc
{
  "presets": ["es2015"],
  "plugins": [
    "transform-async-to-generator",
    "transform-runtime"
  ]
}

これで async として定義した(もしくは Promise を返す)関数/メソッド/アロー関数の実行が完了するのを、await で待つことができます。

app.js
// 指定ミリ秒後に Promise の resolve を返す関数
function sleep(msec) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, msec)
  })
}

(async () => {

  await sleep(1000)

  console.log('aaa') // 1秒後に aaa を出力

  await sleep(2000)

  console.log('bbb') // 更に2秒後に bbb を出力

})()

上記で即時関数で実行している理由は、await は async として定義した関数/メソッド/アロー関数「内」でしか書けないためです。ややこしいのですが。

今回のフロントエンド環境は GitHub に置きました。よろしければ参照ください。
https://github.com/hkusu/browser-async-await-example

その他の例

HTTP クライアントに axios を利用すれば、await でレスポンスを待つことが出来ます(axios のレスポンスは Promise を返すので)。

例えば Qiita の API で新着投稿の1件目のタイトルを取得しコンソールへ出力するコードは次のようになります。

asyncな関数orメソッドorアロー関数の中のコード
// ...

const res = await axios.get('https://qiita.com/api/v1/items?page=1&per_page=10')

console.log(res.data[0].title)

// ...

また従来のコールバックを await で待つには、Promise で包んであげればよいです。
コールバックを await で待ち受ける