web-dev-qa-db-fra.com

Comment utiliser Bluebird avec Angular?

J'ai essayé d'utiliser Angular avec les promesses Bluebird:

HTML:

<body ng-app="HelloApp">
    <div ng-controller="HomeController">{{name}} {{also}}</div>
</body>

JS:

// javascript
var app = angular.module('HelloApp', []);

app.controller("HomeController", function ($scope) {
    var p = Promise.delay(1000).then(function () {
        $scope.name = "Bluebird!";
        console.log("Here!", $scope.name);
    }).then(function () {
        $scope.also = "Promises";
    });
    $scope.name = "$q";
    $scope.also = "promises";
});

window.app = app;

[ Fiddle ]

Cependant, peu importe ce que j'ai essayé, il restait "$q promises" et ne se mettait pas à jour. Sauf si j'ai ajouté un $scope.$apply manuel que je préférerais éviter.

Comment obliger Bluebird à travailler avec AngularJS?

(Je sais que c'est possible puisque $ q le fait)

J'utilise Bluebird 2.0, ce qui m'a donné ici .

javascriptangularjspromisebluebirdangular-promise
44
Benjamin Gruenbaum

C'est possible, et même assez facile!

Eh bien, si nous regardons comment les promesses faites par Angular fonctionnent , nous devons amener Bluebird à $evalAsync quelque part pour obtenir exactement le même comportement.

Si nous faisons cela, le fait que les deux implémentations soient Promises/A + conforme signifie que nous pouvons interagir entre le code $q et le code Bluebird, ce qui signifie que nous pouvons utiliser librement toutes les fonctionnalités de Bluebird dans le code Angular.

Bluebird expose cette fonctionnalité, avec sa fonctionnalité Promise.setScheduler :

// after this, all promises will cause digests like $q promises.
function trackDigests(app) {
    app.run(["$rootScope",function ($rootScope) {
        Promise.setScheduler(function (cb) {
            $rootScope.$evalAsync(cb);
        });
    }]);
}

Il ne reste plus qu’à ajouter un:

trackDigests(app);

ligne après la ligne var app = ... et tout fonctionnera comme prévu. Pour obtenir des points bonus, mettez Bluebird dans un service afin de pouvoir l'injecter plutôt que de l'utiliser sur l'espace de noms global. 

Voici un [ Fiddle ] illustrant ce comportement. 

Notez que, outre toutes les fonctionnalités que Bluebird possède au-dessus de $q, l’un des plus importants est que Bluebird exécutera pas l'exécution $exceptionHandler, mais suivra automatiquement les rejets non gérés, de sorte que vous pourrez throw librement avec les promesses Bluebird les comprendre. De plus, appeler Promise.longStackTraces() peut vous aider à déboguer beaucoup.

59
Benjamin Gruenbaum

Bibliothèque Angular bluebird promises remplace le service $q par bluebird. $http traverse également bluebird

0
Sel