2016-05-10 4 views
1

Ich möchte fragen kann then() für jede Funktion verwendet werden?JS Promises - Angular - Kann dann für jede Funktion verwendet werden?

In meiner Angular App sehe ich einen Fehler ('kann Eigenschaft nicht dann von undefiniert lesen'), wenn Sie versuchen, then zu verwenden.

Zum Beispiel habe ich diese Funktion:

self.getCommentsData = function() { 
    commentsService.getComments($routeParams.id) 
    .then(function (data){ 
    //Do some stuff and at the end push to a scope array 
    $scope.commentsList.push(someValue); 
    }); 
} 

Und später möchte ich diese Methode aufrufen und dann (und nur dann), wenn eine andere Zeile Code nennen thats, abgeschlossen, die waren, ist ich verwende die then:

self.getCommentsData() 
     .then(function(){ 
     $location.hash('goTotrue'); 
     $anchorScroll(); 
}); 

das gibt mir einen Fehler - fragen, was ich falsch mache?

Dank

+0

.dann ist keine Magie, es ist nur auf Promises gleichermaßen Objekte verfügbar. – YOU

Antwort

3

sollten Sie versprechen in Funktion für Ketten

self.getCommentsData = function() { 
    return commentsService.getComments($routeParams.id) 
    .then(function (data){ 
    //Do some stuff and at the end push to a scope array 
    $scope.commentsList.push(someValue); 
    }); 
} 
+0

Danke - ist es so einfach wie ein 'return' hinzuzufügen? – userMod2

-1

Nein zurückkehren, können Sie nur dann auf $ Versprechen verwenden.

Also nur dies funktionieren wird:

commentsService.getComments($routeParams.id).then(function (data){ 
    $scope.commentsList.push(someValue); 
}); 
1

.then() nicht auf jede Funktion verwendet werden kann. Nur eine Funktion, die eine Form eines Versprechens zurückgibt.

Ich würde die MDN Dokumente auf Promises, Promise.prototype.then, und Versprechen in Angular mit $q überprüfen.

In Ihrem Fall gibt nur ein Versprechen zurück, so kann darauf aufgerufen werden.

commentsService.getComments($routeParams.id).then() gibt auch eine Promise zurück, die nach der Funktion im Block ausgeführt wird, daher können Sie einfach eine return hinzufügen, um das erstellte Versprechen zu verketten. Es wäre das gleiche wie der Aufruf:

commentsService.getComments($routeParams.id).then().then(); 

Ihr Code mit return hinzugefügt:

self.getCommentsData = function() { 
    return commentsService.getComments($routeParams.id) 
     .then(function (data){ 
     //Do some stuff and at the end push to a scope array 
     $scope.commentsList.push(someValue); 
     }); 
} 
+0

Aber diese Methode * konnte * das Versprechen zurückgeben, wodurch es weiter verkettet werden konnte. Dies ist eine halbe Antwort. – Jamiec

+0

Danke - ich verstehe jetzt, so in der Antwort oben von @aseferov - ist das Lösen so einfach wie das Hinzufügen einer 'return' – userMod2

+0

@Jamiec. Ich stimme zu. Antwort aktualisiert Ich war ein wenig verwirrt von der Frage. Konnte nicht feststellen, ob er dieses Verhalten wollte oder nicht. – mgmcdermott

0

Sie benötigen ein Versprechen zurück, wenn Sie nicht, wird dieser Fehler immer noch angezeigt. Wenn Sie die angular documentation sehen, können Sie diese finden:

Der Zweck des latenten Objekt ist das dazugehörige Versprechen Instanz sowie APIs zu machen, die zur Signalisierung des erfolgreichen oder nicht erfolgreichen Abschluss verwendet werden können, als auch

angular 
 
    .module("myApp", []) 
 
    .controller("myCtrl", myCtrl) 
 
    .service("myService", myService) 
 
    
 
    myCtrl.$inject = ["myService"]; 
 
    myService.$inject = ["$q", "$timeout"]; 
 
    
 
    function myCtrl(myService){ 
 
    var vm = this; 
 
    vm.data = [{user: "empty"}, {user: "empty"}, {user: "empty"}] 
 
    vm.message = "Just wait 3 seconds to retrieve the data"; 
 
    
 
    myService.myPromise().then(function(res){ 
 
     //success case. The promise has been resolved 
 
     vm.data = res; 
 
     vm.message = "Promise resolved!"; 
 
     console.log("resultado"); 
 
     console.log(res); 
 
    }); 
 
    
 
    
 
    } 
 
    
 
    function myService($q, $timeout){ 
 
    this.myPromise = function(){ 
 
     var promiseObj = $q.defer(); //promise 
 
     var dummyData = [{user: 1}, {user: 2}, {user: 3}]; 
 
     
 
     //this timeout is to ilustrate that the promise may take some time 
 
     //you don't need to use the $timeout service 
 
     $timeout(function(){ 
 
     promiseObj.resolve(dummyData); //promise resolved 
 
     }, 3000); 
 
     
 
     //promise resolved 
 
     return promiseObj.promise; 
 
     
 
    } 
 
    }
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
</head> 
 

 
<body ng-controller="myCtrl as ctrl"> 
 
    <h1>Promise test</h1> 
 
    <h2>Dummy data</h2> 
 
    <h4>{{ctrl.message}}</h4> 
 
    <ul> 
 
    <li ng-repeat="data in ctrl.data">{{data.user}}</li> 
 
    </ul> 
 
</body> 
 

 
</html>

: als der Status der Aufgabe

Um dies zu veranschaulichen, habe ich diesen Schnipsel gemacht