Angular Make HttpClient Get's Wait

Question

Так что здесь я инициализирую свои массивы вызовом this.Reload.All(), чтобы пойти и получить все массивы, которые мне нужны для фильтрации вещей позже в программе. То, что происходит, - то, что все 4 звонка сделаны , и затем 4 ответа возвращаются. Это сбивает с толку и ломает службу, потому что она не может принять так много звонков, прежде чем вернуть свои ответы. То, что я ищу, - это синхронное решение, которое будет делать что-то вроде этого: вызов 1 - ответ 1 - вызов 2 - ответ 2 - вызов 3 - ответ 3 - вызов 4 - ответ 4. Reponse.dbX_response.view - это просто способ мой JSON возвращается с сервера.

Весь мой код работает правильно, только асинхронность прерывает мои вызовы. Как я могу это исправить?

//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'
            );
        }
    }

Новое редактирование:

Итак, я заменил DoCall и Все методы этим, но это все равно не работает. Проверьте скриншот ниже для результатов.

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();
},

Вот 3 скриншота из 3 обновлений. Как вы можете видеть, похоже, что функция async All () вызывает смешивание массивов, что нормально. Не уверен, почему, но это все еще как-то задерживает ответы. Последний всегда работает, что, вероятно, означает, что предыдущие ответы заменяются следующими, приходящими?

Answer 1

Итак, это только здесь написано, поэтому код не тестируется, но что-то вроде этого должно работать, чтобы сделать ваши звонки синхронными.

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'
        );
    }
}

В качестве альтернативы в более новой версии JS вы можете использовать

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

при использовании обещаний.