时间戳

首页 > 解决方案 > Angular（分页 API 请求）您在预期流的位置提供了“未定义”

angular - Angular（分页 API 请求）您在预期流的位置提供了“未定义”

问题描述

我正在尝试发出多个 API 请求并将所有结果合并到一个数组中，但我的问题是其中一个 API 具有分页响应每次我尝试订阅 Observable 时都会收到以下错误

“你在预期流的地方提供了‘未定义’。你可以提供 Observable、Promise、Array 或 Iterable。”

组件.ts

ngOnInit() {
    this.appService.multipleDataRequest().subscribe(responseList => {
      console.log(responseList);
    // this.response1 = responseList[0];
    // this.response2 = responseList[1];
    // return this.arr = this.response1.concat(this.response2);
    });
 }

服务.ts

fetch(url) {
    return this.http.get(url).pipe(
      mergeMap(
      data => {
        const page = data['next_page'];
        console.log(page);
        if (page !== null) {
          return this.fetch(page);
        }
      }
      )
    );
  }

    multipleDataRequest(): Observable<any[]> {
    // const news = this.http
    // .get<INews[]>('xxx');
    const articles = this.fetch('https://casounico.zendesk.com/api/v2/help_center/es/articles.json?');
    // return forkJoin([news, articles]);
    return forkJoin([articles]);

我也在分享 StackBlitz https://stackblitz.com/edit/angular-7j5v1z

谢谢大家，任何帮助将不胜感激

标签： angularapigetrequest

解决方案

mergeMap 接受一个返回流的函数。但是当页面为空时，函数返回未定义，因此错误。要消除错误，只需：

data => {
        const page = data['next_page'];
        console.log(page);
        if (page !== null) {
          return this.fetch(page);
        } else return [];  // return whatever you want, but it needs to be an array, observable or promise. 
      }

推荐阅读