...await: 配列の中でawaitを使い非同期処理をする

早速ですが、以下のコードを見てください。(LTSであるv8.9.1で動作確認済)

const fn = async () => [1, 2, 3]

const main = async () => {
  const list = [...await fn(), ...await fn()]
  console.log(list)
  // [1, 2, 3, 1, 2, 3]
}

main()

配列の中でawaitとして得た配列をを...で展開しています。
...awaitなんて実際出番ないだろと思うかも知れませんが、GoogleChrome/puppeteerでも使われています。

さて、伝えたいことはこれだけですが、それではアレなので、async/catchと一緒に使ってみましょう。

async/catchについては、以下の記事を参照して下さい。

async関数においてtry/catchではなくawait/catchパターンを活用する

さて、配列を返す関数をランダムでエラーを起こすようにしてみます。

const fn = async () =>
  Math.random() > 0.5
    ? [1, 2, 3]
    : Promise.reject(new Error('hello from array!!!'))

const main = async () => {
  const list = [
    ...(await fn().catch(err => [])),
    ...(await fn().catch(err => []))
  ]
  console.log(list)
  // => []
  // or => [1, 2, 3]
  // or => [1, 2, 3, 1, 2, 3]
}

main()

[]か[1,2,3]か[1,2,3,1,2,3]と配列の中で非同期のエラー処理が出来ます。

少し邪悪にしてみます。awaitはthenも待てるので、普通に非同期な処理を配列の中で書くことが出来ます。

const fn = async () =>
  Math.random() > 0.5
    ? [1, 2, 3]
    : Promise.reject(new Error('hello from array!!!'))

const main = async () => {
  const add1 = x => x + 1
  const map = fn => x => x.map(fn)

  const list = [
    ...(await fn().catch(err => console.log(err.message) || [])),
    ...(await fn()
      .then(map(add1))
      .catch(err => []))
  ]

  console.log(list)
  // => hello from array!!!
  // => [ 2, 3, 4 ]
}

main()

おわりに

...awaitの利用シーンは限られている気はしますが、何か面白い使い方ができたらいいですね。
何かあればコメント欄またはツイッターまでお願いします。

...await pic.twitter.com/ChYtTta1BX

— あかめ@無職.js (@akameco) November 9, 2017

...await/catch 🤔 pic.twitter.com/yxKj5KLvmp

— あかめ@無職.js (@akameco) November 9, 2017

とんでもない邪悪が産まれた ...await with async/catch pic.twitter.com/W8ADwDNUq9

— あかめ@無職.js (@akameco) November 10, 2017