我正在使用angular-ui-router resolve从服务器获取数据,然后再进入一种状态。有时,对服务器的请求失败,我需要通知用户有关失败的信息。如果我从控制器呼叫服务器,则可以then在呼叫失败的情况下在其中放置并呼叫通知服务。我将呼叫发送到服务器是resolve因为我希望子孙状态在服务器启动之前等待服务器的结果。
resolve
then
万一对服务器的调用失败,在哪里可以捕获错误?(我已经阅读了文档,但仍然不确定如何使用。此外,我正在寻找尝试这个新代码段工具的原因:)。
"use strict"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '<div>{{listvm}}</div>' + '<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' + '<ui-view />', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '<div>{{detailvm}}</div>', 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 }; }] }); } ]); <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> <div ng-app="MyApp"> <ui-view /> </div>
问题是,如果路由解析中的任何依赖项 被拒绝 ,则控制器 将不会 被实例化。因此,您可以将故障转换为可以在实例化控制器中检测到的数据。
伪代码示例:-
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); }]
并在您的控制器中:
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 };
如果您正在$http通话或进行类似操作,则即使出现故障,也可以使用http promise始终解析数据并将状态返回给控制器。
$http
例:-
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 strict"; angular.module('MyApp', ["ui.router"]).config([ "$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/item"); $stateProvider .state("list", { url: "/item", template: '<div>{{error}}</div><div>{{listvm}}</div>' + '<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' + '<ui-view />', controller: ["$scope", "$state", function($scope, $state){ $scope.listvm = { state: $state.current.name }; }] }) .state("list.detail", { url: "/{id}", template: '<div>{{detailvm}}</div>', 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" }; }] }); } ]); <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <div ng-app="MyApp"> <ui-view></ui-view> </div>