Why does my Array Pushes doesnt work the right way? Vue

Question

a simple question: I want to add simple numbers to an array, which I want to compare later to another array. But I can't access the content of the update-Array.

This is my code:

checkForUpdates(curr_dataset) { 
  var current = curr_dataset;
  var update = [];

  //put in array
  axios.get('http://localhost:3030/disruptions/', {
    params: {
      DisruptionCategory: 0
    }
  })
  .then(response => {
    console.log("push " + response.data.data.length)
    update.push(response.data.data.length);
  })
  .catch((error) => {
        console.log(error.data);
  });
  axios.get('http://localhost:3030/disruptions/', {
    params: {
      DisruptionCategory: 1
    }
  })
  .then(response => {
    console.log("push " + response.data.data.length)
    update.push(response.data.data.length);
  })
  .catch((error) => {
        console.log(error.data);
  });
  axios.get('http://localhost:3030/disruptions/', {
    params: {
      DisruptionCategory: 2
    }
  })
  .then(response => {
    console.log("push " + response.data.data.length)
    update.push(response.data.data.length);
  })
  .catch((error) => {
        console.log(error.data);
  });
  axios.get('http://localhost:3030/disruptions/', {
    params: {
      DisruptionCategory: 3
    }
  })
  .then(response => {
    console.log("push " + response.data.data.length)
    update.push(response.data.data.length);
  })
  .catch((error) => {
        console.log(error.data);
  });

  console.log(update[0]); //HERE I GET "undefined"

}

To continue and compare the content of my update-Array with the current-Array I need to be sure that I've got the right values...

Anyone an idea?

Answer 1

This code is asynchronous. I would recommend you take a look at how asynchronous javascript code works.

Basically what you are doing is this:

1. Creating an empty array
2. Make an Axios get request. When this completes, go to 2.1, if it fails go to 2.2.
   • 2.1 Push to Array
   • 2.2 log error
3. Make an Axios get request. When this completes, ..
   • 3.1 ..
   • 3.2 ..
4. ..
5. Show me what the element at index 0 in the array.

You see, the calls 2.1/3.1/4.1 only get executed, WHEN the request returns successful. Javascript is not blocking the script until they complete. So until it gets to 5., non of these requests should have completed or failed. That is why nothing gets pushed to the array.

Here on SO you will find many examples, blog entries and questions already relating to that.

Furthermore, you should start using async/await for those use cases. It is just way cleaner code and is easier to debug (in my opinion). Also use const instead of var.

an example would be:

async checkForUpdates(curr_dataset) {
  const current = curr_dataset
  const update = []
  const promises = [0,1,2,3].map(async i => {
    try {
      r = await axios.get('http://localhost:3030/disruptions/', { 
        params: {
          DisruptionCategory: i
        }
      })
      // execute the rest of the code here, like pushing to the array
    } catch (e) {
      console.log(e.data)
    }
  await Promise.all(promises)
  console.log(update[0])
}