Angular Make HttpClient Get's Wait

Question

So here I will initialise my arrays with the call this.Reload.All() to go and get all the arrays I need to filter things later in the program. What happens is that all 4 the calls are made and then the 4 responses come back. This confuses & breaks the service because it cannot take in so many calls before giving back their responses. What I am looking for is a synchronous solution that would do something like this: call 1 - response 1 - call 2 - response 2 - call 3 - response 3 - call 4 - response 4. The reponse.dbX_response.view is just the way my JSON comes back from the server.

All of my code is working correctly, it is just the async that is breaking my calls. How can I fix this?

//Reload Reference Arrays
    RefVehicleTypes = [];
    RefClients = [];
    RefUsers = [];
    RefObjects = [];

//Reload Class:
    Reload = {
        DoCall : (pUrl, pArray, pResponse) => {
            this.HttpClient.get(pUrl).subscribe(
                (response: any) => {
                    this[pArray] = eval(pResponse);
                    console.log(pResponse + ' : ' + this[pArray]);
                }
            );   
        },
        All : () => {
            this.Reload.VehicleTypes();
            this.Reload.Clients();
            this.Reload.Users();
            this.Reload.Objects();
        },
        VehicleTypes : () => {
            this.Reload.DoCall(
                'http://...',
                'RefVehicleTypes',
                'response.dbVehicleType_response.view',
            );
        },
        Clients : () => {
            this.Reload.DoCall(
                'http://...',
                'RefClients',
                'response.dbClient_response.view',
            );
        },
        Users : () => {
            this.Reload.DoCall(
                'http://...',
                'RefUsers',
                'response.dbUser_response.view'
            );
        },
        Objects : () => {
            this.Reload.DoCall(
                'http://...',
                'RefObjects',
                'response.dbObject_response.view'
            );
        }
    }

NEW EDIT:

So I replaced the DoCall and All methods with this, but this still doesn't work. Check the screenshot below for the results.

DoCall : (pUrl, pArray, pResponse) => {
    return new Promise((resolve, reject) => {
        this.HttpClient.get(pUrl).subscribe(
            (response: any) => {
                console.log('##############################' + pArray)
                console.log(this[pArray]);
                this[pArray] = eval(pResponse);
                console.log(this[pArray]);
                resolve();
            }
        )
    });
},
All : async () => {
    await this.Reload.VehicleTypes();
    await this.Reload.Clients();
    await this.Reload.Users();
    await this.Reload.Objects();
},

Here are 3 screenshots of 3 refreshes. As you can see, it seems like the async All() function causes the arrays to be mixed around, which is ok. Not sure why but it is still somehow delaying the responses. The last one always works, which probably means the previous responses are being replaced by the next one coming in?

Answer 1

So, this is only written here, so the code is not tested, but something like this should work to make your calls synchronous.

Reload = {
    DoCall : (pUrl, pArray, pResponse) => {
        return new Promise((resolve, reject) => {
            this.HttpClient.get(pUrl).subscribe(
                (response: any) => {
                    this[pArray] = eval(pResponse);
                    console.log(pResponse + ' : ' + this[pArray]);

                    resolve();
                }
            );  
        }
    },
    All : () => {
        this.Reload.VehicleTypes().then(() => {
            return this.Reload.Clients();
        }).then(() => {
            return this.Reload.Users();
        }).then(() => {
            return this.Reload.Objects();
        }).then(() => {
            console.log("Everything reloaded");
        });
    },
    VehicleTypes : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefVehicleTypes',
            'response.dbVehicleType_response.view',
        );
    },
    Clients : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefClients',
            'response.dbClient_response.view',
        );
    },
    Users : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefUsers',
            'response.dbUser_response.view'
        );
    },
    Objects : () => {
        return this.Reload.DoCall(
            'http://...',
            'RefObjects',
            'response.dbObject_response.view'
        );
    }
}

Alternatively in newer JS version you could use

All : async () => {
    await this.Reload.VehicleTypes();
    await this.Reload.Clients();
    await this.Reload.Users();
    await this.Reload.Objects();
},

while still using promises.