在多个 http 调用中处理 Spinner答案

【问题标题】：Handle Spinner in multiple http calls angular在多个 http 调用中处理 Spinner
【发布时间】：2018-03-09 20:50:24
【问题描述】：

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

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

【问题讨论】：

尝试更改加载程序代码以保持请求计数。
解决方案是使用 Promise，因此在您的所有请求得到响应之前，您的微调器不会关闭。如果您向我提供带有 http 调用和微调器的代码，请检查此 Fiddle jsfiddle.net/Zenuka/pHEf9/21，我可以告诉你如何实现。
@BaselIssmail 是的，我同意你的观点，但问题是 http 调用是由不同的组件（嵌套或并行）进行的，因此很难确定哪个调用首先完成或哪个是本系列中的最后一个调用

标签： angularjs http angular-http-interceptors

【解决方案1】：

根据我对问题的理解，您的代码“按预期”运行。闪烁不是由您的实现中的错误引起的，而是由“限制情况”引起的：两次连续的$http 调用，导致您的加载程序屏幕在第一个请求完成后瞬间关闭，以便很快重新激活在发出第二个请求之后。当两个请求足够接近时，这会产生闪烁效果：您的最终用户不知道发出了两个连续请求，他只是看到加载屏幕关闭，然后很快又出现。在这种情况下，计算打开请求不能缓解您的问题：当第一个承诺完成时，第二个尚未完成：计数器仍然是“一个打开请求”，所以在承诺完成后，您的逻辑现在检测到有 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：还有第三个选项我没有讨论过，因为你的帖子给我的印象是它不适用于你的情况，所以我将把它贴在这个脚注中，作为对未来读者的提示.

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

【讨论】：