处理无限滚动和 laravel 错误 429 上的 api 请求答案

【问题标题】：Handle api requests on infinity scroll and laravel error 429处理无限滚动和 laravel 错误 429 上的 api 请求
【发布时间】：2020-12-27 11:49:25
【问题描述】：

目前我正在开发一个应用程序，用户可以在其中无限滚动浏览产品。前端是 vue，我的后端是 laravel，里面有我的图片。产品图片通过 axios.get 加载到我的 laravel api。

<v-card>
   {some other components}
<v-img :src="loadProductImage(product.nr)"
                        contain/>
  {some other stuff}
</v-card>

当然，这仅在渲染的 v-card 在视口中时触发。

然而，这导致我遇到另一个问题。
无限滚动通过分页加载 25 个产品信息（此处不包含图像，因为这会花费太长时间）。当用户决定快速向下滚动时，分页调用完美无缺。但这会触发大量图像加载请求排队，从而导致错误 429“请求过多”。
我的另一个想法是也为图像调用分页请求。但这也会导致大约 25*60kB 的数据被传输（不是那么大，但对我来说，当我看不到任何图像并且突然一次显示 25 个图像时，这有点干扰）。

除了在 laravel 中提高油门之外，还有其他优雅的解决方案吗，因为这似乎是“它有效，但不是应该的方式”-方式。

【问题讨论】：

转到您的 RouteServiceProvider 并尝试推荐 configureRateLimiting 或将限制增加到 60 以上，这是默认值，如果这有助于您可以仅对一条路线或整个应用禁用它跨度>

标签： laravel vue.js axios

【解决方案1】：

简单的解决方案是添加一些条件，仅在上一个请求完成时才获取下一个内容。例如：

async fetch() {
    if (!this.isFetching) {
        this.isFetching = true
        await httpCall()

        // optionally you may add some setTimeout here, to make sure
        // you don't stress your server.
        this.isFetching = false
    }
}

对于您的图像，我建议您不要使用不同的 httpCall 获取产品图像，因为它会杀死您的服务器。通过急切加载获取产品图片，例如

Product::with('images')->paginate();

然后，使用 LazyLoad 技术显示它。

为了更好的用户体验，您可以添加Vue Content Loader。所以用户知道该应用实际上是在尝试加载下一个内容。

【讨论】：