Angular 4个嵌套的http调用和合并数据

Question

我的 api returns 20 个结果导致一次 http 调用，但我想要 40 条记录，我正在进行嵌套的 http 调用，如图所示 below.I 我能够获取 40 条记录，但是当我订阅 getALL() 方法时，我只得到 20 个结果；

getAll() {
    return this._http.get(this.baseURL)
      .do((data: any) => {
        this.nextPage = data.next_page_token;
        var results = data.results;
        return this._http.get(`${this.baseURL}?next=${this.nextPage}`).delay(2000).do((d: any) => {
           return Observable.of(results.concat(d.results));
        });
  });
}

Answer 1

do() 运算符仅用于产生副作用，它根本不会修改经过的值。

在您的情况下，您可以使用 concatMap() 合并两个 Observable，并使用 map() 修改内部 Observable 的发射值：

return this._http.get(this.baseURL)
  .concatMap((data: any) => {
    this.nextPage = data.next_page_token;
    var results = data.results;

    return this._http.get(`${this.baseURL}?next=${this.nextPage}`)
      .delay(2000)
      .map((d: any) => results.concat(d.results));
  });

Answer 2

另一种解决方案是使用 mergeMap 运算符

首先导入运算符：

import 'rxjs/add/operator/mergeMap';

然后你可以像这样链接

this.http.get(this.baseURL)
            .map((res: Response) => res.json())
            .mergeMap(customer => this.http.get(`${this.baseURL}?next=${this.nextPage}`)
            .map((res: Response) => res.json())
            .subscribe(res => {console.log(res)});

借自

Angular 4个嵌套的http调用和合并数据

Angular 4 nested http call and merge data

rxjs

rxjs5

angular