Question

分页将太多请求发送到服务器。请求数等于当前页面。也就是说，假设我开始浏览以下页面：第1页发送一个请求，2第2页请求，3第3页请求，等等（例如，在第15页上发送15个请求，所有内容都冻结了）。如果转到最后一页并从那里开始转换，则请求数将从2开始增加。

为什么会这样以及如何解决？

服务：

  fetch(search: string, sort: string, order: string, pageSize: number, page: number): Observable<UsersApi> {
    let params = new HttpParams();
    params = params.append("search", search);
    params = params.append("sort", sort);
    params = params.append("order", order);
    params = params.append("pageSize", pageSize.toString());
    params = params.append("page", page.toString());

    return this.http.get<UsersApi>("/api/users/get_all", { params: params });
  }

ts：

getUsers() {
  this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
  merge(this.sort.sortChange, this.paginator.page)
    .pipe(
      startWith({}),
      switchMap(() => {
        this.loading = true;
        return this.usersService!.fetch(this.search, this.sort.active, this.sort.direction, this.pageSize, this.page);
      }),
      map(data => {
        this.loading = false;
        this.isTotalReached = false;
        this.totalItems = data.rowCount;
        return data.users;
      }),
      catchError(() => {
        this.loading = false;
        this.isTotalReached = true;
        return observableOf([]);
      })
    ).subscribe(data => (this.users = data))
}

onPaginateChange(event) {
  this.page = event.pageIndex + 1;
  this.pageSize = event.pageSize;
  this.getUsers();
}

html：

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="totalItems" [pageSize]="pageSize"
(page)="onPaginateChange($event)" showFirstLastButtons>

Answer 1

其中一个订阅需要取消订阅。尝试使代码更简单一些，以使其随后关闭订阅。例如：

getUsers(){
this.loading = true;
this.usersService.fetch().subscribe(data=>{
        this.loading = false;
        this.isTotalReached = false;
        this.totalItems = data.rowCount;
        this.users = data;
},error=>{
    //handle error
   });
    }

分页将太多请求发送到服务器

1 个答案: