回答編集履歴

後半部を追加

2020/03/05 12:55

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -95,3 +95,277 @@
 }
 ```
+---
+> ただ外部のAPIと通信するのでPromise.allでは並列で1度にAPIを叩いてしまう処理になってしまいlimitを超えてしまう為、使用を控えております。
+mapというのは値を関数に従って変形させた結果を取り出すという目的に使われるものなので、
+高度な非同期処理を内包したものを作るには不向きです。
+なので、基本的にはfor文でお行儀よく１個ずつ処理を走らせる方向で考えるのが自然だと思います。
+それでもリスト操作でこなすなら
+100個のリクエストというボールが入ったプールがあったとして、
+バケツで5個ずつ組み上げる作戦があります。
+[Lodashのchunk](https://lodash.com/docs/4.17.15#chunk)関数が丁度それに使えます。
+実装をコードになおすと下記のような感じ。
+```js
+const range = (a, b) => Array(b - a + 1).fill(0).map((_, i) => i + a);
+console.log(range(1, 10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+const chunk = (arr, size) => arr.reduce((result, it, i) => {
+  if (!result[Math.floor(i / size)]) result[Math.floor(i / size)] = [];
+  result[Math.floor(i / size)].push(it);
+  return result;
+}, []);
+console.log(JSON.stringify(chunk(range(1, 21), 5), null, 2));
+```
+```json
+[
+  [
+    1,
+    2,
+    3,
+    4,
+    5
+  ],
+  [
+    6,
+    7,
+    8,
+    9,
+    10
+  ],
+  [
+    11,
+    12,
+    13,
+    14,
+    15
+  ],
+  [
+    16,
+    17,
+    18,
+    19,
+    20
+  ],
+  [
+    21
+  ]
+]
+```
+これを実際に作るなら[reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)を使いながらthenを次々に転がすような実装になります。
+```js
+const chunk = (arr, size) => arr.reduce((result, it, i) => {
+  if (!result[Math.floor(i / size)]) result[Math.floor(i / size)] = []
+  result[Math.floor(i / size)].push(it)
+  return result
+}, [])
+const handler = async (event, context, callback) => {
+  const array_1 = ["aaa","bb","cccc"]
+  const limit = 5
+  await chunk(array_1, limit).reduce((promise, arr) => {
+    promise.then(() => Promise.all(
+      arr.map(updateProduct)
+    ))
+    return promise
+  }, Promise.resolve(1))
+}
+```
+まぁ、chunkのアイデアまでは良いと思いますが、
+reduceは明らかにES5まで退行しているので、
+素直に[for...of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)を使った方が100倍見栄えは良いでしょう。
+```js
+const chunk = (arr, size) => arr.reduce((result, it, i) => {
+  if (!result[Math.floor(i / size)]) result[Math.floor(i / size)] = []
+  result[Math.floor(i / size)].push(it)
+  return result
+}, [])
+const handler = async (event, context, callback) => {
+  const array_1 = ["aaa","bb","cccc"]
+  const limit = 5
+  for (const arr of chunk(array_1, limit)) {
+    await Promise.all(
+      arr.map(updateProduct)
+    )
+  }
+}
+```
+最速で行きたいなら
+stateを使って状態管理した方が良いでしょうね。
+状態管理に依存するので使うとするならforEach1個だけで頑張るのが無難ですが、
+だったらやはりfor...ofでよくね？と感じます。
+まぁ、Babelはasync関数とfor...ofの同時利用を解決出来るか怪しいので、
+forEachで書けそうなら頑張っても良いと思いますが。
+```js
+const waitFor = (ms) => new Promise(resolve) =>
+const waitUpdate = async (state, limit) => {
+  while (true) {
+    if (state.map(it => it.loading).length < limit) break
+    await waitFor(1000) // リミット件数実行中なら1秒程度待つ
+  }
+}
+const handler = async (event, context, callback) => {
+  const array_1 = ["aaa","bb","cccc"]
+  const limit = 5
+  const states = array_1.map(str => ({str, loading: false}))
+  for (const state of states) {
+    await waitUpdate(states, limit)
+    state.loading = true
+    updateProduct(state.str).then(() => state.loading = false)
+  }
+}
+```
+大体こんな感じがゴールになるでしょう。

冒頭の解説を追加

2020/03/05 12:55

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -1,4 +1,20 @@
+問題点はシンプルで、async関数直下でしかawait構文は使えません。
+入れ子OKにするとでかいasyncメイン関数内ならどこでも使い放題みたいになってコードが崩壊しますからね。
+なので[Array.prototype.map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)(以下map)内でawaitを使いたければmapに引数もasync関数にしてやる必要があります。
+しかしmapでasync関数を突っ込んでもPromiseの配列になるだけです。
+なので単純にasync関数を突っ込むだけでは上手く行きません。
+[Promise.all](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)を使いましょう。
-私はTypeScriptに関してはあまり詳しくないのでJavaScriptで書きます。
+私はTypeScriptに関してはあまり詳しくないのでJavaScriptで書きますが、
 解説付きコードで表現するとこんな感じです。
@@ -30,7 +46,7 @@
-  // なのでupdateProductがPromiseを返すならこれでOK
+  // もしupdateProductがPromiseを返すならこれでOK
   // const array_2 = array_1.map(updateProduct)
@@ -46,9 +62,25 @@
 }
+```
+ですが、そもそも`updateProduct`という名称から目的を推測するに、
+非同期処理を伴う戻り値Promiseインスタンスですよね？
+もし違うならawaitで待ちたいとかお前は何を言っているんだ？みたいな状態になってしまいますね。
-// 上記を踏まえてシンプルに書くとこんな感じ
+上記を踏まえてシンプルに書くと、
+最終形はこんな感じになっていると考えられます。
+```js
 const handler = async (event, context, callback) => {