AngularJS: Funktion mit Versprechen und nicht versprechen Daten

Question

Ich habe eine Funktion, die Daten hat, die eine Kombination von Versprechen Daten und einfache mathematische Werte ist. Hier ist die Funktion:

_getTotalPrice = function() { 

      var price = 0; 
      // Simple Math data. 
      // Calculate price for channels first. 
      price = price + (num_channels - 5)*(4); 


      var themepacks = cart.themepacks; 
      if(themepacks) { 
       angular.forEach(themepacks, function(pack, index) { 

       // data coming from a service 
       channelFactory.getThemePack(pack).then(function(result) { 
        price = price + Number(result.packPriceAmt); 
        console.log("price", price); 
        }); 
       }); 
      } 

      console.log(" Total price", price); 
      return price; 
}; 

Zum Zeitpunkt der Seite zu laden, wird der Wert von Total price und price unterscheidet. Dies liegt daran, dass die price geladen wird, nachdem das Versprechen gelöst wurde. Wie kann ich warten, bis das Versprechen abgeschlossen ist, bevor der Wert zurückgegeben wird? Erstelle ich ein anderes Versprechen innerhalb dieser Funktion?

Answer 1

Die Funktion muss selbst eine Zusage für den Gesamtpreis zurückgeben, die von allen (all) der Auflösungen des erstellten Versprechens abhängig ist.

Zuerst wird ein wenig Factoring klar helfen it up:

// return a promise for a theme pack price 
function priceOfPack(pack) { 
    return channelFactory.getThemePack(pack).then(function(result) { 
     return Number(result.packPriceAmt); 
    }); 
} 

Dies macht klarer die Idee, dass wir asynchron eine Reihe von Preisen sammeln fahren. Jetzt ist die Schleife einfacher ...

_getTotalPrice = function() { 
    var themepacks = cart.themepacks || []; 
    var promises = []; 
    angular.forEach(themepacks, function(pack, index) { 
     promises.push(priceOfPack(pack)); 
    }); 
    var basePrice = (num_channels - 5) * 4; 

    // when all promises are resolved, they will be with an array of prices 
    return $q.all(promises).then(function(result) { 
     return result.reduce((a, b) => { a + b }, basePrice); 
    }); 
} 

Der Anrufer muss erkennen, dass die neue Funktion ein Versprechen zurück, und dementsprechend ändern, so ...

_getTotalPrice().then(function(result) { 
    // result is the totalPrice 
}); 

Answer 2

Try this:

_getTotalPrice = function() { 

      var price = 0; 
      // Simple Math data. 
      // Calculate price for channels first. 
      price = price + (num_channels - 5)*(4); 


      var themepacks = cart.themepacks; 
      if(themepacks) { 
       angular.forEach(themepacks, function(pack, index) { 

       // data coming from a service 
       return channelFactory.getThemePack(pack).then(function(result) { 
        price = price + Number(result.packPriceAmt); 
        return $q.when(price); 
        }); 
       }); 
      } 
      else{ 
       return $q.when(price); 
      } 
}; 

_getTotalPrice().then(function(price){ 
    console.log(price); 
}); 

Es wird Asynchron-Funktion sein.