一键处理多个http请求

Question

我是 angularJS 的新手。我将 Angular 指令用于块 UI，它按预期工作。我的问题是在加载两个模板之间它实际上调用了 3 个后端服务。所有这些服务都必须是顺序的。所以在错误情况下它只是跳过这一步。根据块 UI 设计，它确实显示了加载页面，但它显示了 3 次（基本上它在每个 http 调用时开始/停止）。我尝试使用他们的手动启动/停止，但它没有效果。即使按照他们的指示，我也一定在配置上做错了什么。抱歉，如果这是一个愚蠢的问题，但我是 angular js 的新手，并且正在学习这些全新的东西。

这里有更多关于我正在使用的指令的详细信息。

github link

我的代码：

 angular.module(‘myApp').controller('MyController', function($scope, blockUI) {

//A function called from user interface, which performs an async operation.
 $scope.onSave = function(item) {

    // Block the user interface
     blockUI.start();

    // Perform the async operation    
     item.$save(function() {
               //service call 1 $http.post
                 if success then
                     //service call 2 $http.post
                     if success
                       //service call 3 $http.post
                     else
                       //error scenario
                 else
                    //error scenario
      // Unblock the user interface
       blockUI.stop();
    });
  };
});

以上代码将显示 blockUI 3 次。作为（3 个 http 调用）...希望在 blockUI 执行时将 3 个不同的调用视为一个调用。

Answer 1

当我找到问题的答案时，我总是很高兴。这是我用于实现的答案。希望这对其他人有帮助。

 angular.module(‘myApp').controller('MyController', function($scope,      blockUI) {

//A function called from user interface, which performs an async      operation.
 $scope.onSave = function(item) {

// Block the user interface
 blockUI.start();

// Perform the async operation    
 item.$save(function() {

           $timeout(function() {
            blockUI.message('Still loading ...'); 

           //service call 1 $http.post
             if success then{
                   $timeout(function() { 
                   blockUI.message('Almost there ...');      

                 //service call 2 $http.post
                 if success then{
                   $timeout(function() { 
                   blockUI.message('Cleaning up ...'); 

                   //service call 3 $http.post
                   if success then
                       //process save
                   else{
                       //error scenario
                       // Unblock the user interface
                       blockUI.stop();
                   }
                    }, 3000);
                 }else{
                   //error scenario
                   // Unblock the user interface
                  blockUI.stop();
                 }
              }, 2000);
             }else{
                //error scenario
                // Unblock the user interface
                blockUI.stop();
             }
  }, 1000);

});
  };
});

这将解决我的问题……它将完整的 3 次调用的用户 blockUI 作为单个 blockUI。现在留言我可以有或没有它取决于个人选择。