angularjs - 在多个 http 调用中处理 Spinner

Question

我在我的应用程序中实现了拦截器，它在任何 http 请求上显示微调器，并在收到响应后隐藏。我还为多个 http 调用实现了计数器，以便微调器在最后一次调用后关闭。

但现在在某些情况下，假设我有三个 http 异步调用，并且在我的第二个调用到达拦截器之前得到了第一个调用的响应。由于这种情况，这会导致屏幕上的微调器在打开和关闭时闪烁。

Answer 1

根据我对问题的理解，您的代码“按预期”工作。闪烁不是由您的实现中的错误引起的，而是由“极限情况”引起的:两次连续的 $http 调用，导致您的加载程序屏幕在第一个请求后瞬间关闭完成只是为了在发出第二个请求后不久重新激活。当两个请求足够接近时，这会产生闪烁效果:您的最终用户不知道发出了两个连续请求，他只是看到加载屏幕关闭，但很快又会出现。< br/>在这种情况下，计算打开的请求不能缓解你的问题:当第一个 promise 完成时，第二个 promise 还没有完成:计数器仍然是“一个打开的请求”，所以在 promise 完成后你的逻辑现在检测到有 0 个打开的请求并停止加载屏幕。

出于这些原因，我能想到的唯一可行的解​​决方案是在加载屏幕上实现一种“关闭延迟”。通过使“加载屏幕关闭”不是立即的，您可以让您的应用有时间启动第二个请求。为了实现这一目标，您有两种选择。

第一个可能是更清晰的一个是在处理微调器的组件中实现“延迟”。修改 .hideSpinner() 方法以在经过一定时间延迟后隐藏微调器，并修改 .displaySpinner() 方法以取消任何挂起的“hideSpinner “称呼。 请注意，如果您使用的微调器组件不是您实现的，因此无法轻易修改，这可能不可行。

第二种方法是在拦截器端工作。您应该已经有一个“结束请求”方法来检查请求计数器是否已返回到 0 并在这种情况下停止加载屏幕您的代码应该类似于(注意，这使用 Typescript):

private startRequest(): void {
    // If this is the first request,start the spinner
    if (this.requestCount == 0) {
        this.loadingOverlayService.start();
    }

    this.requestCount++;
}
private endRequest(): void {
    // No request ongoing, so make sure we don’t go to negative count.
    // Should never happen, but it is better to be safe than sorry.
    if (this.requestCount == 0)
        return;

    this.requestCount--;
    // If it was the last request, call the service to stop the spinner.
    if (this.requestCount == 0) {
        this.loadingOverlayService.stop();
    }
}

只需在 endRequest 方法上添加一个 setTimeout 延迟。这样，实际的“这是最后一个请求”检查将被延迟，让您的应用程序有时间在微调器关闭之前启动新请求。请注意，这引入了一个新问题:现在任何加载微调器的持续时间都会比要求的多 1Δ，其中 Δ 是您使用的超时。在大多数现实世界的情况下，这实际上不是问题，无论如何您都不希望加载微调器“太快”，以避免在非常短的请求时出现类似的闪烁问题。

您的代码应该如下所示:

private endRequest(): void {
    setTimeout(function() {
        if (this.requestCount == 0)
        return;

        this.requestCount--;

        if (this.requestCount == 0) {
            this.loadingOverlayService.stop();
        }
    }, 1000);        
}

如前所述，现在检查将在请求结束后运行一秒钟。这将为您的第二个请求提供启动时间，并在处理程序检查是否还有其他未决请求等待之前递增计数器。因此，您的加载屏幕应该快速关闭并重新打开，而只是保持打开状态，从而消除闪烁的外观。

---

PS:还有第三个选项我没有讨论，因为你的帖子给我的印象是它不适用于你的情况，所以我将把它贴在这个脚注中作为对 future 读者的提示.

如果您所有的请求都是预先确定的，这意味着它们可以同时开始(没有请求必须等待前一个请求的结果)，您可能能够使用 $q.all() 将它们链接成一个累积 promise 。这可以避免闪烁效果，但需要进一步测试以确保此解决方案符合您的需要。最后，setTimeout 选项可能是最方便的选项，具有最大的努力/成本/质量折衷。