javascript for文でのpromise

Question

#javascript for文でのpromise

##コード

smapleFor() {
      const resultArray = []
      const hoge = new Promise(resolve => {
        for (let i = 0; i < 6; i++) {
          axios
            .get(
            'https://script.google.com/macros/s/AKfycbyelRmE8FAZ7qXEZO7J0WzD_wuiCwZVlxIrxLrwMLXBHiPqdHm4/exec'
            )
            .then(response => {
              const myPromise = response.data[i].name
              resultArray.push(myPromise)
              resolve(resultArray)
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
      hoge.then(val => { // 後続の処理
        console.log(val)
      })
    },

##やりたいこと
これはあくまで例なのですが、スプレッドシートから出力させたものを配列にpushし、それを後続の処理で使いたいのですが配列に一個格納された時点でresplveしてしまい、うまくいきません。

配列に全てデータをpushしてから後続の処理をさせたい場合どのようにすればいいでしょうか？

Answer 1

配列に全てデータをpushしてから後続の処理をさせたい場合どのようにすればいいでしょうか？

いったん.mapでPromiseの配列を作って、Promise.all(配列).then(resolve)のように、「全部揃ったらresolveする」ようなコードを書いてください。

Comments

[art_porokyu]

ありがとうございます。
やってみます。

[art_porokyu]

やってみました。
がundefindeになりうまくいきません。
考え方が間違っていますでしょうか？

```javascript
smapleFor() {
const resultArray = []
const hoge = new Promise(resolve => {
for (let i = 0; i < 6; i++) {
axios
.get(
'https://script.google.com/macros/s/AKfycbyelRmE8FAZ7qXEZO7J0WzD_wuiCwZVlxIrxLrwMLXBHiPqdHm4/exec'
)
.then(response => {
const myPromise = response.data[i].name
resolve(myPromise)
})
.catch(err => {
console.log(err)
})
}
})
hoge.then(val => {
// promiseの配列を作る
const promiseArray = Promise.map(resultArray, () => {
resultArray.push(val)
})

// allで完了まで待つ
Promise.all(promiseArray).then(array => {
console.log(array)
})
})
},
```

Answer 2

smapleFor() {
      const promises = []
      for (let i = 0; i < 6; i++) {
        promises.push(this.createPromise(i))
      }
      Promise.all(promises).then(responses => {
        console.log(responses)
      })
    },
    createPromise(i) {
      return axios
        .get(
          'https://script.google.com/macros/s/AKfycbyelRmE8FAZ7qXEZO7J0WzD_wuiCwZVlxIrxLrwMLXBHiPqdHm4/exec'
        )
        .then(response => {
          const userData = response.data[i].name
          return Promise.resolve(userData)
        })
        .catch(err => {
          return Promise.reject(err)
        })
    },

Promise.allに配列を入れました。

Answer 3

もし、要素を全て配列へpushしてresolveしたいのであれば、resolve(resultArray)をfor文のあとに置けばよいかと思います。ちなみに、今のままでは要素一つに対して逐一resolve(resultArray)を行う仕様になっています。

Comments

[art_porokyu]

ありがとうございます。
やってみたのですが、空の配列が出力されるだけでした。
promiseの書き方に問題があるのでしょうか・・・