Angular Page загружается до завершения всех данных

Question

Я разместил на этом канале информацию о проблеме, с которой столкнулся несколько дней назад, и до сих пор сталкиваюсь с той же проблемой.

В настоящее время я работаю над приложением Angular и Typescript.

Я делаю четыре разных вызова API, получаю данные и отображаю их на странице пользовательского интерфейса.

Эта функция

public async getData(){
    let data = await this.http.get<any[]>("google.com").toPromise();
    return data;
}

получает данные из первого API и передает их в пользовательский интерфейс, который прекрасно работает, если я только вызываю первый API. Причина, по которой я нуждаюсь в этом по порядку, заключается в том, что первый вызов должен получить конкретные данные до того, как сработает функция секунд, и ему нужны эти данные для запуска своего собственного процесса, то же самое с третьей и четвертой функцией.

Эта вторая функция

 async getValueWithAsync(){
    let data = await this.http.get<any[]>("google.com").toPromise();
    return data;
}

получает вторые данные от второго Api, и я вызываю их из общедоступной асинхронной функции getData () следующим образом.

const a = await this.getValueWithAsync().then(res => {alert(res)});

По какой-то причине данные возвращаются, я могу видеть их с alert (res), но функция getData () возвращает без Data всякий раз, когда я вызываю getValueWithAsync (), в то время как если я не вызываю его, он приходит с данными, но значения, необходимые из getData (), не определены, что имеет смысл.

Я буду признателен за любую помощь еще раз.

Answer 1

Попробуйте это ..

this.getData().then(res => {
    alert(res);
    this.getValueWithAsync().then(res => {
        alert(res)
    });
});

Примечание: если это не работает, попробуйте с наблюдаемым