如何通过fetch函数仅获取数组中的前5条数据？

问题根源 #

你的代码存在两个核心问题：

• 重复请求且结果被覆盖：while循环执行了5次fetch请求，每次都会返回完整的用户数组，并且每次都把this.people赋值为完整数组，最后一次赋值会覆盖所有之前的操作，所以最终得到的还是全量数据。
• 冗余的循环操作：完全不需要循环调用fetch，只需要发起一次请求，拿到完整数据后截取前num条即可。

修正后的代码方案 #

方案1：前端截取指定数量数据

只发起一次请求，拿到数据后用slice方法截取前num条：

people: [],
getAllProducts(searchInput, num = 5) {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((res) => {
      // 截取数组前num条数据
      this.people = res.slice(0, num);
    });
}

方案2：通过接口参数控制返回数量（更优）

如果接口支持通过URL参数限制返回条数（比如JSONPlaceholder支持_limit参数），推荐直接在请求时指定，减少数据传输量：

people: [],
getAllProducts(searchInput, num = 5) {
  fetch(`https://jsonplaceholder.typicode.com/users?_limit=${num}`)
    .then((response) => response.json())
    .then((res) => {
      this.people = res;
    });
}

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