如何在Angular 13中从restAPI动态打印下一页信息

Question

这是我的页面。ts

export class CharactersPage {
url: string = "https://rickandmortyapi.com/api/character?page=1";
chars: any;
constructor(private http: HttpClient) {
this.getInfo();
}
async getInfo() {
this.http.get<any>(this.url).subscribe(res => {
this.chars = res.results
});
}
}

这是我的页面.html

<ion-content>
<ion-list>
<ion-item *ngFor="let chars of chars | filter:searchTerm" id="item">
<ion-thumbnail slot="start">
<ion-img src="{{ chars.image }}"></ion-img>
</ion-thumbnail>
<ion-label>{{ chars.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>

我使用这个代码得到的是前20个字符。我希望能够打印所有的字符，而不必每次都提出不同的请求。共42页，每页20个字符(第42页只有6个字符(。我试着使用while循环，但angular一直在我身上崩溃。

Answer 1

基于文档https://rickandmortyapi.com/documentation/#info-分页api支持某种分页，您必须实现自定义的分页。在我看来，提出42个连续请求不是一种选择。

你可以用上一个/下一个按钮的实现来检查这两个链接：

rick和morty分页

.

反应rick和morty分页

Answer 2

也许您可以尝试使用rxjs combineLatest将请求连接(组合(为一个请求。

因此，做一些类似"https://rickandmortyapi.com/api/character?page=pageId"的事情，迭代您想要的页面，然后将可观测值合并为一个。

const url ='https://rickandmortyapi.com/api/character?page=';
const pages = ['1','2','3','4','5'];
const observables = pages.map(pageId => this.http.get<any>(this.url+pageId));
combineLatest(observables).pipe(map(values) => ({...values})).subscribe(res => {
this.chars = res.results
});

注意这仍然会导致多个请求。如果你想要一个单一的请求，api必须能够处理它

此外，函数getInfo不是异步

Answer 3

正如其他人已经指出的那样，如果API不支持每次请求获取20个以上的项，则需要实现某种递归HTTP调用来检索所有项；"立即"；。一般来说，这是一种糟糕的做法(对服务器和客户端都不好(，您应该实现某种分页。

尽管如此，这里有一个如何递归地对其进行处理的例子：

export class AppComponent {
chars = [];
constructor(private http: HttpClient) {}
ngOnInit() {
void this.getAllChars();
}
async getAllChars() {
let url = 'https://rickandmortyapi.com/api/character?page=1';
let res;
do {
res = await this.http.get(url).toPromise();
this.chars = [...this.chars, ...res.results];
url = res.info.next;
} while (res.info.next);
}
}