如何处理angular-ui-router解析中的错误

Question

我正在使用angular-ui-router
resolve从服务器获取数据，然后再进入一种状态。有时，对服务器的请求失败，我需要通知用户有关失败的信息。如果我从控制器呼叫服务器，则可以then在呼叫失败的情况下在其中放置并呼叫通知服务。我将呼叫发送到服务器是resolve因为我希望子孙状态在服务器启动之前等待服务器的结果。

万一对服务器的调用失败，在哪里可以捕获错误？（我已经阅读了文档，但仍然不确定如何使用。此外，我正在寻找尝试这个新代码段工具的原因：）。

"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>

Answer 1

问题是，如果路由解析中的任何依赖项 被拒绝 ，则控制器 将不会 被实例化。因此，您可以将故障转换为可以在实例化控制器中检测到的数据。

伪代码示例：-

   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始终解析数据并将状态返回给控制器。

例：-

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>