是否有人有很好的示例或教程,在哪里可以找到使用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'])。
我将很乐意为您解决此常见问题的每个想法或提供更多信息的链接。显然我也没有正确的术语,因此请在此处找到任何合适的答案。 :-/
答案 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
}