Promise.all() for a promiseArray not returning any values

Question

I have the following setup where I am trying to make a call to a function which returns a Promise, which in turn has a Promise.all() call to make an indefinite number of axios.post() calls. I tried using axios.all() and axios.spread(...responses), but no luck. I've also tried a number of examples posted to SO from experienced users. But still no luck.

It's worth noting that the calls are being made, it's just that the responses being returned are undefined.

The function being called is the following:

createSurveyResult(surveyResults) {
  let token = Vue.prototype.$auth.getLocalStorage(`${this.activeUser.uuid)_{process.env.NODE_ENV}_ACCESS_TOKEN`)

  if (token) {
    axiosModified.defaults.headers.common['Authorization'] = `Bearer ${token}`
  }

  return new Promise(resolve => {
    let promiseArray = surveyResults.map(payload => {
      axiosModified.post('/feedback/results/', payload)
    })

    Promise.all(promiseArray).then(responses => {
      responses.forEach(res => console.log(res))
      console.log('submitted all axios calls');
      resolve(responses)
    }).catch(error => {
      resolve(error.response)
    })
  })
}

Which is being called as:

this.$surveys.createSurveyResult(surveyResults).then((responses) => {
  console.log(responses)
});

Yet, both the console.log(res) res objects return are undefined within the Promise.all() , the console.log('submitted all axios calls'); is being called, and the responses from the then() callback are returned as:

I'm wondering what I am doing wrong here?

because the callback in the `surveyResults.map()` method doesn't return anything — Guy Incognito, Aug 27 '20 at 09:16
@GuyIncognito Perfect, thank you - it was literally a case of removing the `{}` inside the return map call. D'oh! — Micheal J. Roberts, Aug 27 '20 at 09:17
FYI, wrapping the `Promise.all()` in a `new Promise()` is an anti-pattern. You don't need to create another promise if you already have one (i.e. the one that `Promise.all()` creates). Simply return the `Promise.all()` instead and use `return responses` instead of `resolve(responses)`. https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it — Lennholm, Aug 27 '20 at 09:28
Ahh yes, quite right. Think I'm just bastardising code over code and not really thinking here. Thank you! — Micheal J. Roberts, Aug 27 '20 at 09:36

score 0 · Answer 1 · answered Aug 27 '20 at 09:33

Write your function like this:

createSurveyResult(surveyResults) {
  let token = Vue.prototype.$auth.getLocalStorage(
    `${this.activeUser.uuid}_${process.env.NODE_ENV}_${ACCESS_TOKEN}`
  );

  if (token) {
    axiosModified.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  }

  return Promise.all(
    surveyResults.map((payload) =>
      axiosModified.post("/feedback/results/", payload)
    )
  );
}

Promise.all() for a promiseArray not returning any values

1 Answers1