Race condition with multiple responses from asynchronous axios calls in a vuejs app

Question

I am running multiple axios.get() calls in my Vue.js app. I would like to call another function

this.useData()

after all of the fetches have received responses. How can I do this? I have read about Promise.all(). If this would help me, please advise on how to incorporate Promise.all into my code.

fetchData() {
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
    }
  }
  this.useData();

If I add async and await to my code like below, Vue.js responds with the error...

Can not use keyword 'await' outside an async function

  await this.fetchData();
  this.useData();


async fetchData() {
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      await axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
    }
  }

After reading the forum the first answer here recommended, I modified my code to the following...

fetchData() {
  return new Promise(resolve => {
    if (this.selectedLayers[j].foo == true) {
      axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
  }
 })};

  let promises = [];
  for (var i = 0; i < this.selectedLayers.length; i++) {
    promises.push(this.fetchData(i));
  }

  Promise.all(promises)
    .then(results => {
      this.useData();
    })
    .catch(e => {
      // Handle errors here
    });

Promise.all() never executes. I imagine there is a nuance with using Promise.all() in tandem with axios.get()?

look on this question https://stackoverflow.com/questions/31426740/how-to-return-many-promises-in-a-loop-and-wait-for-them-all-to-do-other-stuff — Guarana, Feb 11 '20 at 21:31

score 3 · Answer 1 · answered Feb 12 '20 at 06:27

async fetchData() {
  let promises = [];
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      let promiseRep = axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
      promises.push(promiseResp);  
    }
  }
  try{
    const results = await Promise.all(promises); //you can use promise chaining here too
  } catch(e){
    console.log(e);
  }
  this.useData();
}

Race condition with multiple responses from asynchronous axios calls in a vuejs app

2 Answers2