Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

早速ですが、以下のコードを見てください。(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の利用シーンは限られている気はしますが、何か面白い使い方ができたらいいですね。
何かあればコメント欄またはツイッターまでお願いします。

akameco
シュレーディンガーの社会人.js
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした