一次点击处理多个http请求

Question

我是 angularJS 的新手。我对块 UI 使用了 Angular 指令，它按预期工作。我的问题是在加载两个模板之间实际上调用了 3 个后端服务。所有这些服务都必须是顺序的。所以在错误情况下它只是跳过这一步。根据块 UI 设计，它确实显示加载页面，但它显示了 3 次（基本上它在每个 http 调用上 start/stop）。我尝试使用它们的手动启动/停止，但没有效果。即使按照他们的指示，我也一定在配置上做错了什么。对不起，如果这是个愚蠢的问题，但我是 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 调用）...希望在块 UI 执行时将 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);

});
  };
});

这将解决我的问题……它使用 blockUI 作为单个 blockUI 进行完整的 3 次调用。现在留言我要不要看个人选择

一次点击处理多个http请求

Handling of Multiple http request in a single click

javascript

jquery

blockui

angularjs