根据 Angular2 中的先前响应进行多次 http 调用答案

【问题标题】：Make Multiple http calls based on previous responses in Angular2根据 Angular2 中的先前响应进行多次 http 调用
【发布时间】：2017-05-05 14:47:55
【问题描述】：

我必须为我的 angular2 应用程序进行多次 http 调用。我首先必须打一个电话，等待响应，从中检索下一个电话的 url 并进行后续电话。同样，我的第三个电话是基于第二个电话的响应。我必须执行此操作，直到 http 调用的响应没有下一个调用的 url。这里的问题是我无法知道我要打多少电话（它完全取决于当前的响应，如果它与下一个电话有链接）。我还需要整合所有电话的响应。

这是每个调用的响应。

{
  "data": {
    "page": 5,
    "pageSize": 500,
    "totalSize": 3000,
    "entries": [],
    "nextPage": {
      "href": "http://someurl?
       requestParam=someValue&page=1&pageSize=500",
      "rel": null
     }
   }
}

我必须从 nextPage 属性中提取值并进行 http 调用，直到我得到 nextPage 属性为空的响应，如下所示。

{
  "data": {
    "page": 5,
    "pageSize": 500,
    "totalSize": 3000,
    "entries": [],
    "nextPage": null
  }
}

这是我用来拨打电话的代码。我不确定如何链接这些调用。

private load(extraUrlParam?: any) {
    let me = this;
    let url = me.getUrl(type, extraUrlParam, null);

    me.pHttp.get(url, this.getHttpOptions())
        .map((response: Response) => response.json())
        .subscribe(
        data => {
            console.log("data received");
             me.data = this.preProcessData(data);
             me.dataSubject.next(this.data);
        },
        error => {
            this.dataSubject.error(error);
            me.handleError(error, url, type);
        });

    }

非常感谢任何建议。

【问题讨论】：

在第二个、第三个等...设置url为nextPage href？
你可以使用递归，但你甚至不需要，并且可以并行进行所有调用（第一个调用除外）：因为你有总大小（3000）和页面大小(500)，你知道应该有 6 页。

标签： angular rxjs

【解决方案1】：

使用递归。这是一个例子。它将执行序列并累积结果直到满足条件。

 function getNext(acc, res) {
   return res < 10 ? 
      Rx.Observable.of({acc: acc + ':' + (res+1), val: res+1})
        .switchMap(({acc, val}) => getNext(acc, val)) : 
      Rx.Observable.of({acc:acc, val: 'done'});
  }

  Rx.Observable.of(0)
    .switchMap(x => getNext(x, x))
    .subscribe(({acc}) => console.log('result:', acc))

【讨论】：

感谢 cmets。我尝试了@ mast3rd3mon 建议的递归，它奏效了。

【解决方案2】：

我不知道这是否是最好的解决方案。但我想到的是像@mast3rd3mon 建议的递归：

调用 loadData() 一次

private url:string;

private loadData(extraUrlParam?: any){
    let me = this;
    this.url = me.getUrl(type, extraUrlParam, null);

    this.load(extraUrlParam);
}
private load(extraUrlParam?: any) {
    let me = this;

    me.pHttp.get(url, this.getHttpOptions())
        .map((response: Response) => response.json())
        .subscribe(
        data => {
            console.log("data received");
             me.data = this.preProcessData(data);
             me.dataSubject.next(this.data);

             // CHANGE THE URL HERE
             me.url = RECIEVED_URL;
             me.load(extraUrlParam);
        },
        error => {
            this.dataSubject.error(error);
            me.handleError(error, url, type);
        });

    }

【讨论】：