Comment exécuter du code lorsqu'une promesse est remplie dans Angular.js ?

Question

Dans mon application Angular.js, je lance une opération asynchrone. Avant qu'elle ne commence, je couvre l'application avec une div modale, puis une fois l'opération terminée, j'ai besoin de supprimer la div, que l'opération ait réussi ou non.

Actuellement, j'ai ceci :

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    LoadingOverlay.stop();
}, function() {
    LoadingOverlay.stop(); // Code needs to be duplicated here
})

Cela fonctionne bien, mais je préférerais avoir quelque chose de plus propre comme ce pseudo-code :

LoadingOverlay.start(); 
Auth.initialize().finally(function() { // *pseudo-code* - some function that is always executed on both failure and success.
    LoadingOverlay.stop();
})

Je suppose qu'il s'agit d'un problème assez courant, je pensais donc que cela pouvait être fait mais je ne trouve rien dans la documentation. Une idée si c'est possible ?

Answer 1

Cette fonctionnalité a été mise en œuvre dans cette demande d'extraction et fait maintenant partie d'AngularJS. Il a d'abord été appelé "always", puis renommé en finally Le code devrait donc être le suivant :

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // Success handler
}, function() {
    // Error handler
}).finally(function() {
    // Always execute this on both error and success
});

Il convient de noter que, dans la mesure où finally est un mot-clé réservé, il peut être nécessaire d'en faire une chaîne de caractères afin d'éviter des problèmes avec certains navigateurs (comme IE et Android Browser) :

$http.get('/foo')['finally'](doSomething);

Answer 2

J'utilise Umbraco version 7.3.5 back end avec AngularJS version 1.1.5 et j'ai trouvé ce fil de discussion. Lorsque j'ai mis en œuvre la réponse approuvée, j'ai obtenu l'erreur :

xxx(...).then(...).finally n'est pas une fonction

Ce qui a fonctionné en revanche, c'est always . Si quelqu'un d'autre utilisant une ancienne version d'AngularJS trouve ce fil de discussion et ne peut pas utiliser finally utiliser ce code à la place

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // Success handler
}, function() {
    // Error handler
}).always(function() {
    // Always execute this on both error and success
});

Answer 3

Pour ceux qui n'utilisent pas angularJS, et si vous êtes d'accord pour rattraper l'erreur (pas sûr que .finally() le fasse), vous pouvez utiliser .catch().then() pour éviter le code dupliqué.

Promise.resolve()
  .catch(() => {})
  .then(() => console.log('finally'));

Le catch() pourrait s'avérer utile de toute façon pour la journalisation ou d'autres opérations de nettoyage. https://jsfiddle.net/pointzerotwo/k4rb41a7/

Answer 4

J'utiliserais ngView pour rendre le contenu de la page et déclencher la suppression de votre modale sur l'événement $viewContentLoaded. Voir http://docs.angularjs.org/api/ng.directive:ngView pour cet événement et http://docs.angularjs.org/api/ng .$rootScope.Scope pour l'écouteur d'événement $on.