只需单击即可处理多个http请求

时间:2015-11-19 03:15:37

标签: javascript jquery angularjs blockui

我是angularJS的新手。我使用Angular指令来阻止UI,它按预期工作。我的问题是在两个模板之间加载它实际上调用了3个后端服务。所有服务都必须是顺序的。所以在错误的情况下它只是跳过这一步。根据块UI设计,它确实显示加载页面,但它显示3次(基本上它在每个http调用上启动/停止)。我尝试使用它们的手动启动/停止但它没有效果。即使遵循他们的指示,我也必须在配置上做错事。对不起,如果它是一个愚蠢的问题,但我是角度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次。 as(3次http调用)...想要在执行blockUI时将3个不同的调用视为一次调用。

1 个答案:

答案 0 :(得分:0)

当我找到问题的答案时,它总是让我开心。这是我用于实施的答案。希望这有助于其他人。

 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。现在消息我可以拥有或不支持个人选择。