title: Race condition with multiple responses from asynchronous axios calls in a vuejs app
body: <p>I am running multiple axios.get() calls in my Vue.js app. I would like to call another function </p>
  
  <pre><code>this.useData()
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>fetchData() {
    for (let j = 0; j &lt; this.selectedLayers.length; j++) {
      if (this.selectedLayers[j].foo == true) {
        axios
          .get("/maps")
          .then(
            response =&gt; {
              console.log(
                "received response for this.selectedLayers[" + j + "]"
              );
              this.selectedLayers[j].data= response.data;
            },
            error =&gt; {
              console.log("error fetching data");
            }
          );
      }
    }
    this.useData();
  </code></pre>
  
  <p>If I add <code>async</code> and <code>await</code> to my code like below, Vue.js responds with the error...</p>
  
  <blockquote>
    <p>Can not use keyword 'await' outside an async function</p>
  </blockquote>
  
  <pre><code>  await this.fetchData();
    this.useData();
  
  
  async fetchData() {
    for (let j = 0; j &lt; this.selectedLayers.length; j++) {
      if (this.selectedLayers[j].foo == true) {
        await axios
          .get("/maps")
          .then(
            response =&gt; {
              console.log(
                "received response for this.selectedLayers[" + j + "]"
              );
              this.selectedLayers[j].data= response.data;
            },
            error =&gt; {
              console.log("error fetching data");
            }
          );
      }
    }
  </code></pre>
  
  <p>After reading the forum the first answer here recommended, I modified my code to the following...</p>
  
  <pre><code>fetchData() {
    return new Promise(resolve =&gt; {
      if (this.selectedLayers[j].foo == true) {
        axios
          .get("/maps")
          .then(
            response =&gt; {
              console.log(
                "received response for this.selectedLayers[" + j + "]"
              );
              this.selectedLayers[j].data= response.data;
            },
            error =&gt; {
              console.log("error fetching data");
            }
          );
    }
   })};
  
    let promises = [];
    for (var i = 0; i &lt; this.selectedLayers.length; i++) {
      promises.push(this.fetchData(i));
    }
  
    Promise.all(promises)
      .then(results =&gt; {
        this.useData();
      })
      .catch(e =&gt; {
        // Handle errors here
      });
  </code></pre>
  
  <p>Promise.all() never executes. I imagine there is a nuance with using Promise.all() in tandem with axios.get()?</p>