Comment gérer les erreurs dans la résolution des routeurs angulars

J’utilise la resolve d’angular-ui-router pour obtenir des données du serveur avant de passer à un état. Parfois, la demande au serveur échoue et je dois informer l’utilisateur de la panne. Si j’appelle le serveur depuis le contrôleur, je peux mettre et appeler mon service de notification en cas d’échec de l’appel. Je mets l’appel au serveur en resolve car je souhaite que les états descendants attendent le résultat du serveur avant de démarrer.

Où puis-je détecter l’erreur en cas d’échec de l’appel au serveur? (J’ai lu la documentation mais je ne sais toujours pas comment. Aussi, je cherche une raison d’essayer ce nouvel outil d’extrait :).

 "use ssortingct"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '
{{listvm}}
' + 'go to child state and sortinggger resolve' + '', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '
{{detailvm}}
', resolve: { data: ["$q", "$timeout", function ($q, $timeout) { var deferred = $q.defer(); $timeout(function () { //deferred.resolve("successful"); deferred.reject("fail"); // resolve fails here }, 2000); return deferred.promise; }] }, controller: ["$scope", "data", "$state", function ($scope, data, $state) { $scope.detailvm = { state: $state.current.name, data: data }; }] }); } ]);
   

Le problème est que si l’une des dépendances de la résolution de l’itinéraire est rejetée , le contrôleur ne sera pas instancié. Vous pouvez donc convertir l’échec en données que vous pouvez détecter dans le contrôleur instancié.

Exemple de pseudocode: –

  data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $timeout(function () { //timeout already returns a promise //return "Yes"; //return success of failure return success ? {status:true, data:data} : {status:false}; //return a status from here }, 2000); }] 

et dans votre contrôleur: –

  controller: ["$scope", "data", "$state", function ($scope, data, $state) { //If it has failed if(!data.status){ $scope.error = "Some error"; return; } $scope.detailvm = { state: $state.current.name, data: data }; 

Si vous effectuez un appel $http ou similaire, vous pouvez utiliser la promesse http pour résoudre les données, même en cas de panne, et renvoyer un statut au contrôleur.

Exemple:-

 resolve: { data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $http.get("someurl") .then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} }); //In case of failure catch it and return a valid data inorder for the controller to get instantated }] }, 
 "use ssortingct"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '
{{error}}
{{listvm}}
' + 'go to child state and sortinggger resolve' + '', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '
{{detailvm}}
', resolve: { data: ["$q", "$timeout","$http", function ($q, $timeout, $http) { return $http.get("/").then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} }) }] }, controller: ["$scope", "data", "$state", function ($scope, data, $state) { $scope.detailvm = { state: $state.current.name, data: data.status ? data :"OOPS Error" }; }] }); } ]);
    

Ancienne question mais j’ai eu le même problème et suis tombé sur cela dans la section FAQ de ui-routeur

Si vous rencontrez des problèmes pour lesquels une erreur sortingviale n’a pas été détectée parce que cela se produisait dans la fonction de résolution d’un état, il s’agit en fait du comportement prévu des promesses selon la spécification.

erreurs de résolution .

Donc, vous pouvez attraper toutes les erreurs de résolution dans la phase d’exécution de votre application comme celle-ci

 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ // this is required if you want to prevent the $UrlRouter reverting the URL to the previous valid location event.preventDefault(); ... })