如何为特定的 API 调用禁用 $http.pendingRequests.length？

Question

我在 angularjs 中有控制器，其中编写了一个逻辑来在页面中显示加载程序。

appCtrl.js

$rootScope.loaderExceptionCount = 0 ;
    $scope.isAnythingLoading = function() {
        console.log($http.pendingRequests, $http);
        return $http.pendingRequests.length > $rootScope.loaderExceptionCount;
    };

和index.html作为

<div ng-show="isAnythingLoading()" class="pageLoader">
        <div class="loaderBackdrop"></div>
            <div class="sk-wave">
                    <div class="sk-rect sk-rect1"></div>
                    <div class="sk-rect sk-rect2"></div>
                    <div class="sk-rect sk-rect3"></div>
                    <div class="sk-rect sk-rect4"></div>
                    <div class="sk-rect sk-rect5"></div>
            </div>
        </div>
<div ui-view=""></div>

有一个 post API 调用我不想要 show loader 。我们可以为特定的 API 调用禁用加载器吗？

Answer 1

可以通过

解决

var skippedUrls = ['...'];
$scope.isAnythingLoading = function() {
  var reqCount = $http.pendingRequests
    .filter(function (req) {
      return !skippedUrls.includes(req.url);
    })
    .length;
  return  reqCount > $rootScope.loaderExceptionCount;
};

The manual 明确说明 $http.pendingRequests 目的：

Array of config objects for currently pending requests. This is primarily meant to be used for debugging purposes.

更可靠的解决方案将涉及 $http 拦截器，它与上面的功能相同，一个单独的服务保存加载状态和一个将状态绑定到 UI 元素的指令。

如何为特定的 API 调用禁用 $http.pendingRequests.length？

How to disable $http.pendingRequests.length for particular API calls?

model-view-controller

http

http-headers

angularjs