基于响应递归组合HTTP结果答案

【问题标题】：Recursively combining HTTP results based on response基于响应递归组合HTTP结果
【发布时间】：2019-06-27 07:40:23
【问题描述】：

有一个 API(https://panelapp.genomicsengland.co.uk/api/v1/panels/?page=1)，我想将所有数据用于我的 Angular 应用程序。问题是他们的 API 有分页，我想一次检索所有内容。

正如您在 API 上看到的那样，它们实际上在其响应中具有指向下一页的“next”属性。只要“下一个”属性不为空，我希望能够继续从 API 请求，然后将它们的所有响应合并为一个。

我尝试过使用递归，但是当它到达第二个循环时，我得到了未定义的值。我的猜测是这是因为异步请求，因此我得到了未定义。

下面是我的代码

@Injectable()
export class GenomicsEnglandService {
    panels = [];
    constructor(private http: HttpClient) {
    }

    getPanels(url): Observable<any>{
        const headers = new HttpHeaders()
        .append('Content-Type', 'application/json')
        .append('Accept', '*/*');

        return this.http.get(url, {headers: headers})
            .map((data) => {
                panels = panels.concat(data.results);
                if(data.next){
                    this.getPanels(data.next);
                }else{
                    return panels;
                }
            })
            .catch((e) => {
                Raven.captureMessage("GENOMICS ENGLAND ERROR: " + JSON.stringify(e));
                return of([]);
            });

    }

}

然后从我刚刚调用的组件中调用

this.GenomicsEnglandService.getPanels('https://panelapp.genomicsengland.co.uk/api/v1/panels/?page=1').subscribe(data => {
  console.log(data);
})

【问题讨论】：

标签： angular recursion rxjs angular-httpclient

【解决方案1】：

虽然已经回答了这个问题，但我想提出另一种方法，使用expand 运算符[https://rxjs-dev.firebaseapp.com/api/operators/expand]。 expand 运算符是为这种递归目的而制作的：

getResult() {

    const url = "https://panelapp.genomicsengland.co.uk/api/v1/panels/";

    return this.getResponse(url)
                    .pipe(
                      expand((res: any) => this.getResponse(res.next)),
                      takeWhile((res: any) => res.next, true),
                      concatMap((res: any) => res.results),
                      reduce((acc, val) => {
                        acc.push(val);
                        return acc;
                      }, []),
                      tap(_ => {
                        console.log(_);
                        this.loading = false;
                      })
                    )

  }

  getResponse(url) {
    return this.httpClient.get(url);
  }

查看工作stackblitz

【讨论】：

喜欢您的回答，我已将 if-else 条件更改为 takeWhile，inclusive last 参数为 true。
@benshabatnoam 哦，是的！我们可以使用takeWhile 代替 if/else。感谢您的编辑。
@user2216584，太好了！

【解决方案2】：

这可以通过使用expand 运算符在 rxjs 中轻松完成：

import {empty, Observable} from 'rxjs';
import {expand, map, reduce} from 'rxjs/operators';

export interface PanelResponse {
  results: object[];
  next: string|null;
}

@Injectable()
export class Service {
  private readonly baseUrl = 'https://panelapp.genomicsengland.co.uk/api/v1/panels/';

  constructor(private http: HttpClient) {
  }

  getPanels(): Observable<object[]>{
    return this.get(this.baseUrl).pipe(
      expand(({next}) => next ? get(next) : empty()),
      map(({results}) => results),
      // if you want the observable to emit 1 value everytime that
      // a page is fetched, use `scan` instead of `reduce`
      reduce((acc, val) => acc.concat(val), new Array<object>()),
    );
  }

  private get(url:string>):Observable<PanelResponse> => this.http.get<PanelResponse>(url);
}

【讨论】：

【解决方案3】：

如果我了解您想要做什么，那么您希望使用 mergeMap 而不是 map。 Merge map 让您可以按顺序组合 observable，如下所示：

getPanels(url): Observable<any> {
  return this.http.get(url)
    .pipe(
      mergeMap(data => {
        panels = panels.concat(data.results);
        if(data.next) {
          return this.getPanels(data.next);
        } else {
          return panels;
        }
      })
    );
}

这行得通吗？

【讨论】：

'return' 在这行'this.getPanels(data.next);'中丢失了

【解决方案4】：

更新见@user2216584 的回答。这个答案被接受，但最好是指示答案

见stackblitz

constructor(private httpClient:HttpClient){}
  ngOnInit()
  {

    this.getHttp('https://panelapp.genomicsengland.co.uk/api/v1/panels/',null).subscribe(res=>{
      this.data=res
    })

  }

  getHttp(url,fullData:any[]):Observable<any[]>
  {
    fullData=fullData || []
    return this.httpClient.get(url).pipe(
      switchMap((data:any)=>{
        fullData=fullData.concat(data.results);
        return !data.next? of(fullData):
               this.getHttp(data.next,fullData)
      })
    )
  }

【讨论】：

【解决方案5】：

我在我的一个项目中做了类似的实现。

在我的服务中（我返回承诺，如果你愿意，你可以返回 observable）

  getDataHttp(url) {
    return this.http.get(url).toPromise();
  }

  getData(url) {
    let response = {};
    let data = [];
    return new Promise(async (resolve, reject) => {
      try {
        do {
          response = await this.getDataHttp(url);
          data.push(response);
        } while(response['next']); 
        resolve(data);
      } catch(err) {
        reject(err);
      }
    })
  }

在我的组件中

this.service.getData(url).then((response) => {
  console.log(response);
}).catch(err => console.log(err))

【讨论】：