async/awaitでiterateがんばる

async/awaitが使える環境がまぁまぁ増えてきてNodeとかでは普通に使うようになりました。
多分みんな一回は頭を悩ませるのはiterate周りだと思います。

例えばforEachとか雰囲気でかくと下みたいな感じになるけど、あくまでasyncキーワードはpromiseを返してくれるようにしてくれて、awaitはpromiseを待つっていう単純な機能を提供するものなのでforEach自身がpromiseを返さない限りはこのコードはうまく動かない。

function timer() {
  return new Promise(resolve => setTimeout(_ => resolve(), 100))
}

(async () => {
  let list = [];
  await [1,2,3,4,5].forEach(async v => {
    await timer();
    list.push(v + 1);
  })
  console.log(list) // 期待値は[2,3,4,5,6]だけど実際は[]
})()

forEachの各イテレーションの返り値はasyncキーワードによってpromiseになってるけど、forEach自身が何も返却しないのでそれをawaitしても当然次の処理まで待機されない。

以下はこういう系の問題をいい感じにするためのコード

forEach

そもそもforEachを使わずに関数スコープを生成しないfor-ofを使って問題解決する

function timer() {
  return new Promise(resolve => setTimeout(_ => resolve(), 100))
}

(async () => {
  let list = [];
  for (let v of [1,2,3,4,5]) {
    await timer();
    list.push(v + 1);
  }
  console.log(list) // [2,3,4,5,6]
})();

map

mapは返り値が配列なので比較的楽。
asyncキーワードをつければ個々の値はpromiseでwrapされて[promise.　<値1>}, promise.<値2>, ...]みたくなるのでそれをPromise.allしてawaitすれば良い

function timer() {
  return new Promise(resolve => setTimeout(_ => resolve(), 100))
}

(async () => {
  let list = await Promise.all([1,2,3,4,5].map(async v => {
    await timer();
    return v + 1;
  }))

  console.log(list) // [2, 3, 4, 5, 6]
})()

reduce

reduceが一番苦しむ。
forステートメントでも簡単に解決できないし返り値が個々の配列でもないので。

これはPromise1のthenでPromise2をreturnしたら、Promiseのchainの返り値がPromise2になる原理をうまく使って解決する。

こういうやつ

(async () => {
  let res = await new Promise(resolve => {
    setTimeout(_ => resolve(1), 100);
  }).then(result => {
    return new Promise((resolve) => {
      setTimeout(_ => resolve(2), 100);
    })
  }).then(result => {
    return new Promise((resolve) => {
      setTimeout(_ => resolve(3), 100);
    })
  })

  console.log(res) // 3
})()

初期値をPromise.resolveでwrapすることで即時に完了するPromiseにして、awaitで待機して真の初期値を得る。
その後、値をreturnするとasyncキーワードによってpromiseでラッップされ、それが次の初期値となる。
この繰り返しでPromiseのchainを作って全体の返り値を最後に返されるPromiseにする。

これによって全体を一つのpromiseにしてしまうことができるのでawaitキーワード一個で全体を待つことができる。

function timer() {
  return new Promise(resolve => setTimeout(_ => resolve(), 100))
}

(async () => {
  let addedList = await [1,2,3,4,5].reduce(async (pmemo, num) => {
    let memo = await pmemo;
    await timer();
    memo.push(num + 1);
    return memo;
  }, Promise.resolve([]));
  console.log(addedList) // [2, 3, 4, 5, 6]
})()

終わりに

p-iteratonっていう便利なライブラリがあります。