Question

这更像是我在玩AngularJS时所做的一项研究，我想分享，因为我认为有些人可能觉得这很有用。

有时您需要在实例化控制器并渲染视图之前从多个服务中获取一些数据。

当某个特定服务正在等待来自另一个服务的响应时，您也会遇到这种情况 - 有点是嵌套服务结构。

最重要的是，您要确保如果这些服务中的任何一个失败，您将相应地处理错误。

Answer 1

模块myApp必须使用名为myFirstService和mySecondService的服务。

如果您通过拒绝服务而使任何服务失败：

defer.reject("second Service Failed");

触发$routeChangeError事件，并在控制台中向用户显示一条消息。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myApp</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">    </script>

  <script>

   var myApp = angular.module('myApp', []);

    myApp.config(function($routeProvider){
      $routeProvider
        .when('/', 
         {
           controller: 'ViewCtrl',
           templateUrl: 'view/app.html',
           resolve: {
           loadData: function(myFirstService){
           return myFirstService.start();
         }
        }
      })
    });

   var appCtrl = myApp.controller('AppCtrl', function($scope, $rootScope){
     $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){

       console.log('Some service has failed: ', rejection);

     });
   });

   var viewCtrl = myApp.controller('ViewCtrl', function($scope, $route){

      $scope.feedback = {
        message: 'All the services are working!'
      }

    });

    myApp.factory('myFirstService', ['$q', '$timeout','mySecondService', function($q, $timeout, mySecondService) {
      var defer = $q.defer();

      return {

        start: function() {

          $timeout(function(){
            defer.resolve('FIRST Service \'myFirstService\' Failed');
          }, 2000);

          return mySecondService.start().then(function(){
           return defer.promise
       });

       }
     }
    }]);


    myApp.factory('mySecondService', ['$q', '$timeout', function($q, $timeout) {
      var defer = $q.defer();

      return {

        start: function() {

         $timeout(function(){
            defer.resolve("second Service Failed");
         }, 2000);

         return defer.promise;

       }
      }
    }]);

  </script>

</head>
<body ng-app="myApp" ng-controller="AppCtrl">

  <script id="view/app.html" type="text/ng-template">

    <h1>{{ feedback.message }}</h1>

  </script>

  <div ng-view></div>

</body>
</html>

如何使用resolve和$ routeChangeError处理嵌套服务和promise

1 个答案: