I define some vars and i use them to retrieve the lat&lng which works, but after i pass the variable to another function doesn`t work

Question

The problem that I face is as follows.

I`m creating some variables in the function with the keyword var x =0; at some point i assign a new value to x and then i log it to the console and it shows the right value. but when i try to use the x(new value) to concatenate it with a string/link i get 0 instead the new value.

I tried to leave x without the 0 and after that is says undefined. Where i`m wrong here?

Tried: var x; var x=0;

in the first scenario it will be undefined and in the second one will be 0.

    geocode();
    function geocode() {

    var lng = 0;
    var lattitude = 0;
    var lattitudeb = 0;
    var lngb = 0;

    var locationA = '1234';
    var locationB = '1323';

    axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
            address: locationA,
            key: 'AIzaSyBpHiHzK323fsregSMCDbgX33xAUB_Cwwi8'
        }
    }).then(function (response) {

        lattitude = response.data.results[0].geometry.location.lat;
        lng = response.data.results[0].geometry.location.lng;


       console.log(lattitude);
       console.log(lng);
    }).catch(function (error) {
        console.log(error);
        });

    axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
            address: locationB,
            key: 'AIzaSyBpHiHzK3434fdf3434rferfeX33xAUB_Cwwi8'
        }
    }).then(function (response) {

        lattitudeb = response.data.results[0].geometry.location.lat;
        lngb = response.data.results[0].geometry.location.lng;

        console.log(lattitudeb);
        console.log(lngb);
    }).catch(function (error) {
        console.log(error);
    });

    axios.get('https://maps.googleapis.com/maps/api/distancematrix/json', {
        params: {
            units: 'imperial',
            origins: lattitude + ',' + lng, // here i get always 0 instead 
                                               of the new updated value
            destinations: lattitudeb + ',' + lngb,
            key: 'AIzaSyBpHirfserfserfser434efddf3ISMCDbgX33xAUB_Cwwi8'
        }
    }).then(function (r) {
        console.log(r);
    }).catch(function (e) {
        console.log(e);
    });

}

Answer 1

Those three requests:

    axios.get('https://maps.googleapis.com/maps/api/geocode/json', {

    axios.get('https://maps.googleapis.com/maps/api/geocode/json', {

    axios.get('https://maps.googleapis.com/maps/api/distancematrix/json', {

are being sent pretty much simultaneously. The third one goes out before the first one receives latitude and other things. The value of lattitude is, at that point, still zero.

That's why you should: send the first one, .then send the one depending on its output. And good practice would be to pass required data as the first promise's return value, instead of using an outside variable.

Actually, here, #3 relies on the results of #1 and #2, and #1 and #2 are independent, am I reading it right? Therefore, the correct pattern would be

Promise.all([
//... first request here
//... second request here
])
.then(
//... third request here