如何显示 XHR 请求的加载图标

How to show loading icon for XHR requests?

本文关键字：请求 加载 图标 XHR 何显示 显示      更新时间：2023-09-26

我有一个加载图像，该图像显示在$routeChangeStart上，一旦路线更改就会隐藏。 我试图找到这样的东西，可以与xhrStart和xhrSuccess一起使用。

    $rootScope.$on('$routeChangeStart', function(){
        $rootScope.loading = true;
    });
    $rootScope.$on('$routeChangeSuccess', function(){
        $rootScope.loading = false;
    });

我知道我可以这样做：

$rootScope.loading = true;
$http.get('/api/customers').success(function(data) {
   $rootScope.loading = false;
   ...

但这会变得乏味。

angularJS中是否有XHR事件可用于显示/隐藏加载图像？

如果加载图形是全局的，则可以使用 httpInterceptor 来解决此问题。 这是一个拦截器的天真实现，它切换$rootScope.loading：

angular.module('myModule').factory('LoadingInterceptor', function ($rootScope) {
        $rootScope.loading = false;
        return {
            request: function (config) {
                $rootScope.loading = true;
                return config;
            },
            response: function (response) {
                $rootScope.loading = false;
                return response;
            }
        };
    })
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push('LoadingInterceptor');
    });

注意：您可能会遇到这种朴素实现的问题。 例如，您可能有并行 XHR 调用（此实现将导致加载程序刷新）。 这是因为当第一个呼叫响应发生时$rootScope.loading被设置回false（即使第二个调用仍在进行中）。

相关文章：