$ 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;        
    }