在Angular的API服务内调用HTTP GET如何仅返回前10条记录

方案1：后端接口配合分页参数（推荐） #

该方案性能最优，避免全量拉取冗余数据，仅需要在服务层的请求中追加分页参数即可，参数名和后端实际约定对齐即可，常见参数名有limit、pageSize等，示例代码如下：

getProduits(): Observable<any[]> {
  return this.http.get<any[]>(this.APIUrl + '/Fproduits', {
    params: {
      limit: '10'
    }
  });
}

如果后端分页规则要求同时传页码，额外加page: '1'参数即可。

方案2：前端服务层用RxJS处理（后端无法修改时使用） #

如果后端接口不支持分页，可直接在服务层通过RxJS的map操作符对返回结果切片，返回前10条，完全不需要修改组件层逻辑：

1. 先导入map操作符：

import { map } from 'rxjs/operators';

2. 修改服务方法：

getProduits(): Observable<any[]> {
  return this.http.get<any[]>(this.APIUrl + '/Fproduits').pipe(
    // 对返回的全量数组切片取前10条
    map(produits => produits.slice(0, 10))
  );
}

注意：如果接口返回的产品列表是嵌套在响应对象的某个字段里（比如res.data），请把map回调里的取值改成对应字段再切片，例如map(res => res.data.slice(0, 10))

内容的提问来源于stack exchange，提问作者AspCoreStudent