AngualrJS中每次$http请求时的一个遮罩层Directive

为了在 AngularJS 发送 $http 请求时展示进度条或遮罩层效果，我们可以创建自定义 Directive。下面是一个实现 $http 遮罩层的完整攻略:

第一步：创建遮罩层 Directive

我们可以创建一个自定义的 Directive，把遮罩层模板添加到页面中。在请求使用 $http 发送请求前，遮罩层应该是不可见的，当请求被发出时，遮罩层应该占满整个页面，并使用加载动画提示用户数据正在处理中。

<!-- 遮罩层中加载动画的HTML结构 -->
<div class="loader-container">
  <div class="loader"></div>
</div>

<!-- 遮罩层Directive -->
<div ng-if="loading" class="my-custom-loader">
  <div class="loader-container">
    <div class="loader"></div>
  </div>
</div>

第二步：创建遮罩层的控制器

创建一个遮罩层的控制器，控制器用来监听 $http 的请求和响应。当请求被发出时，控制器将显示遮罩层，并启用加载动画。当请求完成时，控制器将隐藏遮罩层并停止加载动画。

app.controller('HttpLoaderCtrl', function($scope) {
    $scope.loading = false;

    $scope.isLoading = function() {
        return $http.pendingRequests.length > 0;
    };

    // 在 $http 请求前显示遮罩层
    $scope .$on('loading-started', function(e) {
        $scope.loading = true;
    });

    // 在 $http 请求完成后隐藏遮罩层
    $scope.$on('loading-complete', function(e) {
        $scope.loading = false;
    });
});

第三步：创建$http拦截器

在AngularJS中，我们可以使用 $http 提供的 transformRequest 方法，通过拦截$http请求添加自定义行为，如此一来，我们就可以在每次请求时展示一个遮罩层。在拦截器里，我们对请求进行修改，添加事件广播器，用来通知其他控制器请求进度。

app.factory('httpInterceptor', function($q, $rootScope) {
  var interceptor = {
    /* 请求成功的拦截 */
    request : function(config) {
      // 发送请求前，发送广播消息
      $rootScope.$broadcast('loading-started');
      return config || $q.when(config)
    },
    // 请求失败的拦截
    response: function(response) {
      // 请求返回后，发送广播消息
      $rootScope.$broadcast('loading-complete');
      return response || $q.when(response)
    }
  };
  return interceptor;
});

第四步：将自定义拦截器添加进$httpProvider

最后，我们需要将自定义拦截器添加进 $httpProvider 中。这样，每次发送 $http 请求时 AngularJS 将使用拦截器里定义的行为来控制 $http 请求和响应。

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('httpInterceptor');
}]);

示例一：

<div ng-controller="HttpLoaderCtrl">
   <h1>AngularJS Http请求的遮罩层</h1>
   <button ng-click="getData()">获取数据</button>
   <p> {{data}} </p>
</div>

app.controller('HttpLoaderCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.loading = false;
    $scope.getData = function () {
        $scope.loading = true;
        $http.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(function (response) {
            $scope.loading = false;
            $scope.data = response.data;
        }, function (response) {
            $scope.loading = false;
            console.log(response);
        });
    };
}]);

上面的例子，按钮点击后会向 "https://jsonplaceholder.typicode.com/todos/1" 发送 GET 请求，同时会显示遮罩层，在请求完成后隐藏。

示例二：

<div ng-controller="HttpLoaderCtrl">
   <h1>AngularJS Http请求的遮罩层</h1>
   <button ng-click="postData()">提交数据</button>
   <p> {{data}} </p>
</div>

app.controller('HttpLoaderCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.loading = false;
    $scope.postData = function () {
        $scope.loading = true;
        $http.post('https://jsonplaceholder.typicode.com/todos', {title: '123', body: 'hello', userId: 1})
        .then(function (response) {
            $scope.loading = false;
            $scope.data = response.data;
        }, function (response) {
            $scope.loading = false;
            console.log(response);
        });
    };
}]);

上面的例子，按钮点击后会向 "https://jsonplaceholder.typicode.com/todos" 发送 POST 请求，同时会显示遮罩层，在请求完成后隐藏。