angular - 等待一个可观察对象返回以发出另一个请求

Question

我正在从工作室 ghibli api 获取数据，我想知道是否有任何方法可以等待 get 请求返回，使用返回数据中的数组来发出另一个请求。

查看此 stackblitz 链接，单击导航或图像中的幽灵公主，然后查看电影组件。并非所有影片都针对此特定数据返回附加了 api 数据，因此只需向下滚动到该影片即可。如何等待 api 请求返回以进行另一个 api 调用？我想把那部电影中的所有个人都拉到电影组件中\

Stackblitz 链接： https ://stackblitz.com/edit/film-people-api-error-w2kbrr?file=src/app/film/film.component.html

标签： angulartypescripthttpasynchronousangular-ng-if

Answer 1

您可以使用mergeMap或只是将后一组请求放在第一个订阅中，即

// First set
this.api.getFilm(this.film).subscribe((data) => {
    
    this.filmData = data[0];
    console.log('Here is the data returned from the ghibli api', data);
    
    // Second set
    for (let i = 0; i < this.filmData.people.length; i++) {
        this.api.getPeople(this.filmData.people[i]).subscribe((data) => {
            this.people.push(data[0]);
        });
    }

});