Difficulty in calling Xmlhttprequest with pure Javascript

Question

I’m having difficulty a few days, I’m beginner and even reading the documentation sometimes apply is not as simple as it seems, I understand that I lack Exp to understand.

my problem: I’m using the google maps Javascript api and an API I made to load the points (markers) on the map. However, sometimes it loads the map and does not load the dots, I can see this because I used the console.log(marcadores.length) to check and it comes zeroed, then I update the page and everything loads correctly, but can also load empty again.

Could someone please give me a light?

I’d like to call the function initMap() only after loading the array with the data that came from my DB API, how to proceed?

Below is the code I use to load the data from the api:

var marcadores = [];
function carregaPosicoes(){
    var request = new XMLHttpRequest();
    request.open("GET", "http://localhost:5000/Truck/Veiculos", true);
  
    request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        const data = JSON.parse(this.response);
        data.forEach(veiculo => {
            marcadores.push(veiculo);
            });
        };
    };
    initMap();
    request.send();

};

Answer 1

Understand that this function() below is a "callback" (you do not send call directly, only passes the reference of the function to someone who will send to call her when it is the appropriate time for it) and is being declared now but will only be called by the object XMLHttpRequest when the ready state change event occurs, that is, at a time later than when it was declared (when your request (request) for the server API, which takes a while to occur and the code cannot wait, has come to an end, for example), while the initMap() is already being called right after this statement and before the request takes place.

request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        const data = JSON.parse(this.response);
        data.forEach(veiculo => {
            marcadores.push(veiculo);
            });
        };
    };
    initMap();

Trying to make a translation, the name "onreadystatechange" means "when the change occurs in the 'ready' state, or to the 'ready' state (call me)" and indicates which function will be called when this event occurs. " on<nome-do-evento>" is a common nomenclature for this code situation that reacts to events.

Therefore playing the initMap() to be called inside it must resolve, as it will call when the event occurs and soon after it has populated the map:

request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        const data = JSON.parse(this.response);
        data.forEach(veiculo => {
            marcadores.push(veiculo);
            });
        };
       initMap();
    };

To learn more:

• What is an event?
• What is a callback?

Answer 2

To complement the @Piovezan response, I’ll put together a simple example demonstrating the program flow when you have one callback or Promise.

This piece of script writes on the console the points it passes, 1 in 1. Note that when executing the order it is not the same, because a Function to generate a 1s wait, and simulate an asynchronous call, for example an API:

/////////////// 1
console.log("ponto 1");
var dados = {};

/////////////// 2
console.log("ponto 2");
sleep(1000).then(() => {
    /////////////// 3
    console.log("ponto 3");
    dados.algumaCoisa = "oi";
    
    /////////////// 4
    console.log("ponto 4");
    console.log("dados.algumaCoisa=" + dados.algumaCoisa);
});

/////////////// 5
console.log("ponto 5");
console.log("dados.algumaCoisa=" + dados.algumaCoisa);

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

/////////////// 6
console.log("ponto 6");

The result of this code is:

ponto 1
ponto 2
ponto 5  <- aqui seguiu o fluxo, pulou os dois pontos que estão na função de callback
dados.algumaCoisa=undefined  <- algumaCoisa ainda não foi definido
ponto 6
ponto 3 <- após 1s, entra no callback
ponto 4
dados.algumaCoisa=oi <- agora algumaCoisa tem valor :)