处理承诺异常的最佳实践



我创建了一个小示例来学习如何处理带有承诺的异常,特别是我所使用的MVC结构。该结构除了使用3个已知组件M模型、V视图和C控制器之外,还使用了一个Data a access Object (DAO),以使其更加独立于后端更改。由于DAO中的转换,您可以使用不同的方法从后端检索数据。但我想这对你们来说一点也不新鲜。
好吧,我想知道的是:如果在MovieInfoService发生异常,代码跳转到getMovieFailed方法并返回$q.reject(e)。但接下来会发生什么呢?DAO是否接收到什么?它是如何被处理的?
我对angular中错误和异常处理的概念很不熟悉。所以我不知道如何用承诺来处理这样的问题。你们能帮助我,给我一些有用的提示,提示或建议如何处理这些问题,以便在用户的视图上显示这些问题,以通知他吗?实际上,即使是alert()将是足够的- 我只需要了解处理异常的承诺的基本思想/概念。

下面是我的一些示例代码:

app.controller('MainController', ['$scope', 'MovieInfoDAO', function ($scope, MovieInfoDAO)
{
    var vm = this;
    vm.movie = {};
    MovieInfoDAO.getMovie()
    .then(function(data){
        vm.movie = data;
    }); 
    activate();
    //////////
    function activate() {
        return getMovieDetails().then(function(){
            console.log('Starting Movie Search');
        });
    }
    function getMovieDetails() {
        return MovieInfoDAO.getMovie().then(function(data) {
            vm.movie = data;
            return vm.movie;
        }
    }
}]);
app.service("MovieInfoDAO", ['$q', 'MovieInfoService', function($q, MovieInfoService)
{
    this.getMovie = function()
    {
        return MovieInfoService.getMovie().then(function(returnData){
            var arrInfoItems = [];
            for(var i = 0, length = returnData.length; i < length; i++){
                var item = new MovieInfoModel(returnData[i]);
                arrInfoItems.push(item);
            }
            return arrInfoItems;
        });
    };
}]);
app.service('MovieInfoService', ['$http', '$q', function($http, $q) {   
    this.getMovie = function()
    {
        return $http({
            method: "GET",
            data: { },
            url: "http://www.omdbapi.com/?t=Interstellar&y=&plot=short&r=json"
        })
        .then(getMovieCompleted);
        .catch(getMovieFailed);
    };
    function getMovieCompleted(response) {
        return response.data;
    }
    function getMovieFailed(e) {
        var newMessage = 'Failed to retrieve Infos from the Server';
        if (e.data $$ e.data.description) {
            newMessage = newMessage + 'n' + e.data.description;
        }
        e.data.description = newMessage;
        return $q.reject(e);
    }
    return this;
}]);
function MovieInfoModel(arrParameter){
    Model.call(this);
    this.title = arrParameter.Title;
    this.actors = arrParameter.Actors;
    this.plot = arrParameter.Plot;
    this.constructor(arrParameter);
}

<div>
    <h1>{{Main.movie.title}}</h1>
    <span>{{Main.movie.plot}}</span>
    <br/>
    <h3>Actors:</h3>
    <span>{{Main.movie.actors}}</span>
</div>

我总是为ajax调用创建服务,它封装了$http服务。在这样的服务中,我们可以为所有请求创建一个错误处理程序。它允许创建许多错误类型并检查http响应代码,如404,500。一些简短的例子,我只添加了get方法:

var app=angular.module('app', []);
app.service('$myAjax', function($http) {
    this.get = function (url,success,error) {
        
       return $http.get(url).then(function(response){
       
         if (response.data.status===1)//status is example success code sended from server in every response
         return success(response.data);
         else{
         
            //here error handler for all requests
            console.log("Something is wrong our data has no success on true."); 
           
            //error callback
            return error(response.data);
         }
         
       },function(response){
       
         //this code will run if response has different code than 200
         //here error handler for all requests
         console.log("Something is very wrong. We have different then 200 http code"); 
         
         //error callback
         return error(response.data);
         
       });
    }
});
//TEST
app.controller("Test",function($myAjax){
  $myAjax.get('http://jsfiddle.net/echo/jsonp/',function(response){
  
    //here success
    return 1;
    
  },function(response){
  
    //here error
    return 0;
    
  }).then(function(data){
       console.log("I am next promise chain"); 
       console.log("Data from callbacks:"+data); 
  });
       
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  
  <div ng-controller="Test">
  </div>
</div> 

即使http代码是200,当数据在1上没有status参数时,我也会显示错误,这是第二个和内部错误处理命题。感谢这个参数,例如,我们可以发送许多状态信息并为它们创建回调。状态2意味着没有权利,状态3意味着没有数据等等。

如果你的意图是在MovieInfoDAO.getMovie()中返回数组arrInfoItems而不是:

return arrInfoItems;

使用承诺,例如:

app.service("MovieInfoDAO", ['$q', 'MovieInfoService', function($q, MovieInfoService)
{
    this.getMovie = function()
    {
        var def = $q.defer();
        MovieInfoService.getMovie()
           .then(function(returnData){
               var arrInfoItems = [];
               for(var i = 0, length = returnData.length; i < length; i++){
                   var item = new MovieInfoModel(returnData[i]);
                   arrInfoItems.push(item);
               }
               def.resolve(arrInfoItems);
            }, def.reject);
        return def.promise;
    };
}]);

使用

app.controller('MainController', ['$scope', 'MovieInfoDAO', function ($scope, MovieInfoDAO)
{
    var vm = this;
    vm.movie = {};
    MovieInfoDAO.getMovie()
    .then(function(data){
        vm.movie = data;
    }, function(error){
        // Handle error here, can be placed in a vm.error variable
    }); 
}]);

最新更新