Angular HttpClient:从RESTfull API页面获取数据(下一页循环)

时间:2018-09-12 09:20:03

标签: angular api pagination

是否有人有很好的示例或教程,在哪里可以找到使用Angular 6和HttpClient从分页的RESTfull API检索数据的良好实践?

从考虑的API检索数据,我在service.ts文件中使用以下代码:

getApiData(term: string): Observable<ApiResponse[]> {
  let apiUri = this.baseUrl;
  let msg = 'data fetched from API';

  if (term.trim()) {
    apiUri = this.baseUrl + this.queryUrl + term;
    msg = msg + ' matching: ' + term;
  }
  return this.http.get<ApiResponse[]>(apiUri)
    .pipe(
      tap(data => {
        this.log(msg);
      }),
      catchError(this.handleError('getApiData', []))
    );
}

但是,我找不到任何提示,如何使用可观察的约束遍历API端点的所有页面(数据['next'])。

我将很乐意为您解决此常见问题的每个想法或提供更多信息的链接。显然我也没有正确的术语,因此请在此处找到任何合适的答案。 :-/

1 个答案:

答案 0 :(得分:1)

首先,对可能未定义的变量执行.trim()时要小心。我会改变你的

if (term.trim()) { ... }

使用

if (term && term.trim()) { ... }

关于如何迭代从可观察对象检索到的数据,我将执行以下操作。假设您的函数getApiData属于服务my-backend.service.ts。假设您想在某个组件中调用代码。如果您在app.modules中添加了服务,则可以从构造函数中将其注入到组件中,如下所示: 首先将其导入:

import {MyBackend} from "/.myBackend.service";

然后将其添加到构造函数中(注入它),并为您的数据添加一个全局变量:

data:any;
constructor( public myBackend: MyBackend){}

现在,无论您想在哪里调用服务,都可以执行以下操作:

this.myBackend.getApiData(term).subscribe( (data) => {
this.data = data;
});

您将把数据存储在组件中。现在,您可以对其进行迭代或执行任何必要的操作(例如,您指出的是data [“ next”])。

如果我不清楚或需要更多详细信息,请告诉我。

编辑

如果您要进行分页搜索,则this.data中应包含有关页面数或找到的结果数与显示的结果数的信息。在这种情况下,您将需要决定是否要再次搜索并多次调用该服务(或通知用户)。

在这种情况下,我认为在您的服务中迭代对http.get的调用是没有意义的,分页搜索并不是要那样工作,而是合理的选择是逐页显示结果到用户。

但是,如果您想执行类似的操作(自动迭代组件中的搜索)。您可以在组件中实现如下功能:

async retrieveAllPages(searchInput){
 let finish = false;
 dataPages = [];

 while (!finish){
  const page = wait this.myBackend.getApiData(searchInput).toPromise()
  dataPages.push(page);
  finish = this.decideIfSearchIsFinished(page);
  searchInput = this.updateSearchTermNextPage (searchInput);
 }
}

您还将需要这些功能。我没有指定它们,因为我不知道您的后端api的工作原理:

decideIfSearchIsFinished(page):boolean{
//looks into the page object response to see if there are more pages or if we are in the last one
//..
}

updateSearchTermNextPage(term):string{
//updates the search term to search for a new page
}