$ q.all не работает как ожидалось

Question

Это похоже на загрузочный div, который я хочу показать, если два вызова API еще не готовы к результатам.

ТАК, что результаты внезапно не прыгают в вид, заставляя его мерцать.

мой взгляд выглядит примерно так:

<div ng-show="vm.loading" class="table-overlay table-overlay-loading"> 
    <div class="table-overlay-content"> 
     <div class="table-overlay-message">Loading&hellip;</div> 
    </div> 
</div> 
<div ng-show="vm.loadError" class="table-overlay table-overlay-error"> 
    <div class="table-overlay-content"> 
     <div class="table-overlay-message"><i class="icon-error-indicator"></i> 
      Error encountered. Please try again. 
     </div> 
    </div> 
</div> 
<div class="inner" ng-show="!vm.loading && !vm.loadError"> 
    <div class="info-panel"> 
     <h3>Current Pricing</h3> 
     <p> 
      Billing Period: 
      <br> 
      <em>{{vm.invoiceCoverageStartDate}} to {{vm.invoiceCoverageEndDate}}</em> 
      <br> 
      <big><b>${{vm.invoiceTotal}}</b>/month</big> 
      <br> 
      <a href=""><small>(See Details)</small></a> 
     </p> 
    </div> 

И методы для заполнения interpolated values выглядеть:

 vm.getCurrentPricingDetails = function(){ 
      HttpWrapper.send(url1, {"operation":'GET'}) 
      .then(function(result){ 
       console.log("Current Pricing Response: ", result); 
       vm.invoiceCoverageStartDate = $filter('date')(result.invoice.coverageStartDate, "dd/MM/yyyy"); 
       vm.invoiceCoverageEndDate = $filter('date')(result.invoice.coverageEndDate, "dd/MM/yyyy"); 
       vm.invoiceTotal = result.invoice.invoiceTotal; 
      }, function(error) { 
       console.log("Error: Could not fetch current pricing details", error); 
      }); 
     } 


     vm.getProjectedPricing = function(){ 
      $timeout(function(){ 
       var selectedPricingMappingObj = dataStoreService.getItems('server'); 
       selectedPricingMappingObj.forEach(function(item){ 
        vm.totalProjectedPricingSum += parseFloat(item.selectedMapping.cost); 
       }); 
       vm.totalProjectedPricingSum = vm.totalProjectedPricingSum.toFixed(2); 
      },1000);         
     } 

Но в моих компонентах $onInit method I tried to resolve the same using promise.

 vm.$onInit = function() {     
      vm.loading = true; 
      vm.loadError = false; 
      var currentPricingDetails = vm.getCurrentPricingDetails(); 
      var projectedPricingDetails = vm.getProjectedPricing(); 

      $q.all([currentPricingDetails,projectedPricingDetails]).then(function(results) { 
       debugger; 
       vm.loading = false; 
      }, function(error){ 
       debugger; 
       vm.loading = false; 
       vm.loadError = true; 
      }); 

Но все-таки экран мерцает и loading div не отображается.

Я хочу loading div не показывать до тех пор, пока эти два метода вызовы не не выполняются с results.`

Как добиться этого?

Что я делаю неправильно?

Answer 1

vm.getCurrentPricingDetails() и vm.getProjectedPricing() не вернуть что-нибудь. Так что ваша линия

$q.all([currentPricingDetails,projectedPricingDetails]) 

действительно просто

$q.all([undefined, undefined]) 

$ q.all ожидает массив обещаний. $ timeout возвращает обещание, когда это будет сделано. И похоже, что ваш HttpWrapper также возвращает обещание. Так что я думаю, что все, что вам нужно сделать, это добавить возвращается к своему коду:

return HttpWrapper.send(url1, {"operation":'GET'}) 

и

return $timeout(function(){ 

Answer 2

vm.getCurrentPricingDetails и vm.getProjectedPricing не возвращаются обещаний и, следовательно, $ q.all не имеет никаких шансов, зная, когда они закончат

m.getCurrentPricingDetails = function(){ 
     var defer = $q.defer(); 
     HttpWrapper.send(url1, {"operation":'GET'}) 
     .then(function(result){ 
      console.log("Current Pricing Response: ", result); 
      vm.invoiceCoverageStartDate = $filter('date')(result.invoice.coverageStartDate, "dd/MM/yyyy"); 
      vm.invoiceCoverageEndDate = $filter('date')(result.invoice.coverageEndDate, "dd/MM/yyyy"); 
      vm.invoiceTotal = result.invoice.invoiceTotal; 
      defer.resolve(); 
     }, function(error) { 
      console.log("Error: Could not fetch current pricing details", error); 
      defer.reject(); 
     }); 
     return defer.promise; 
    } 


    vm.getProjectedPricing = function(){ 
     var defer = $q.defer(); 
     $timeout(function(){ 
      var selectedPricingMappingObj = dataStoreService.getItems('server'); 
      selectedPricingMappingObj.forEach(function(item){ 
       vm.totalProjectedPricingSum += parseFloat(item.selectedMapping.cost); 
      }); 
      vm.totalProjectedPricingSum = vm.totalProjectedPricingSum.toFixed(2); 
      defer.resolve(); 
     },1000); 
     return defer.promise;        
    }