我应该将所有数据加载到数组中并过滤吗？

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 您真正想要拥有哪些数据，这种方法效果最好。