いま現在(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 で新着投稿の１件目のタイトルを取得しコンソールへ出力するコードは次のようになります。
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 で待ち受ける