javascript - 我应该将所有数据加载到一个数组中并对其进行过滤吗？

Question

我正在使用朋克啤酒 API https://punkapi.com/documentation/v2构建一个可以按 ABV 搜索和过滤啤酒的应用程序。我想将 API 中的所有啤酒分为 3 类:弱 (0-5%)、中等 (5%-12%) 和强 (>12%)。

起初，我想使用文档提供的参数 abv_lt 和 abv_gt 为每个范围调用 API。但后来我认为每次用户单击条件时都调用 API 会很昂贵。

所以我的下一个方法是通过将所有页面连接在一起，将所有啤酒加载到一个大数组中，并从本地主数组进行所有过滤和搜索(默认情况下，每个请求仅返回 25 种啤酒):

getAllBeers(){
  const requestURL=`${root_api}beers`;
   axios.all([
      axios.get(`${requestURL}?page=1&per_page=80`),
      axios.get(`${requestURL}?page=2&per_page=80`),
      axios.get(`${requestURL}?page=3&per_page=80`),
    ])
     .then(axios.spread(function (data1, data2,data3) {
      let beerData1 = data1.data;
      let beerData2 = data2.data;
      let beerData3 = data3.data;
      let master_data = beerData1.concat(beerData2, beerData3);
      return master_data;
     }))
}

如果有解决此问题的更好或更有效的方法，我将不胜感激。谢谢。

Answer 1

最好的方法可能是让您的前端适应 API 提供数据的方式。目前，您可能会提前获取比大多数用户查看的更多的数据。这会给服务器带来不必要的负载并浪费客户端的带宽。只要列表不是很大，对数组进行排序所需的计算能力对于现代设备来说是可以忽略不计的。

因此，最好只获取未过滤啤酒的第一页，并首先将其显示给用户。仅当用户确实想要应用过滤器或查看下一页时才获取更多内容。

还有许多 API 支持缓存结果，并在重复相同请求时告诉您的客户端它已经拥有最新数据。如果您告诉 API 您实际想要哪些数据，这种方法效果最好。