2016-09-02 2 views
2

필자는 사용 된 MVC 구조에 초점을 맞춘 약속으로 예외를 처리하는 방법을 배우기 위해 작은 예제를 만들었습니다. 이 구조는 3 개 개의 알려진 성분 M ODEL, V iew 및 C ontroller 이외에 CCESS O bject (DAO)가 백엔드의 변화로부터 독립적 될 ATA D를 이용한다. DAO에서의 변환으로 인해 다른 방법을 사용하여 백엔드에서 데이터를 검색 할 수 있습니다. 하지만 그건 당신에게 전혀 새로운 개념이 아닌 것 같아요.
글쎄, 내가 알고 싶은 건 : MovieInfoService에서 예외가 발생하면 코드는 getMovieFailed 메서드로 점프하고 $q.reject(e)을 반환합니다. 그러나 다음은 어떻게 될까요? DAO는 무언가를 받고 어떻게 처리됩니까?
나는 각도와 에러 핸들링의 개념에 익숙하지 않다. 그러므로 나는 약속과 같은 문제를 어떻게 처리 할 수 ​​있는지 전혀 모른다. 너희들이 나에게 도움을 줄 수 있고 사용자에게이 문제를 보여주기 위해 이러한 문제를 다루기위한 유용한 힌트, 팁 또는 조언을 알려줄 수 있습니까? 사실 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); 
} 

HTML 당신의 내포가 arrInfoItemsMovieInfoDAO.getMovie()의 배열을 반환하는 경우

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

답변

2

난 항상 $ HTTP 서비스를 캡슐화되어 아약스 통화에 대한 내 서비스를 만들 수 있습니다. 이러한 서비스에서는 모든 요청에 ​​대해 하나의 오류 처리기를 만들 수 있습니다. 많은 오류 유형을 생성하고 404,500과 같은 HTTP 응답 코드를 확인할 수 있습니다. 이처럼 보일 수있는 방법을 몇 가지 간단한 예를 들어, 내가 유일한 방법을 얻을 덧붙였다 데이터가 1에 더 status 매개 변수가 없을 때 코드가 200도 HTTP 경우

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>

내가 오류를 보여,이 두 번째이며, 내부 오류 처리 명제. 감사합니다. 매개 변수 예를 들어 많은 상태 정보를 보내고 콜백을 만들 수 있습니다. 상태 2는 의미 없음 - 권한 없음, 상태 3 - 데이터 없음 ...

1

, 대신의 :

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 
    }); 

}]);