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您实际想要的数据，则效果最好。

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

1 个答案: