AngularJS를 사용한 글로벌 Ajax 오류 처리기


82

내 웹 사이트가 100 % jQuery 일 때 다음과 같이했습니다.

$.ajaxSetup({
    global: true,
    error: function(xhr, status, err) {
        if (xhr.status == 401) {
           window.location = "./index.html";
        }
    }
});

401 오류에 대한 전역 처리기를 설정합니다. 지금, 나는 함께 AngularJS와를 사용 $resource하고 $http서버 내 (REST) 요청을 할 수 있습니다. 각도로 전역 오류 처리기를 유사하게 설정하는 방법이 있습니까?


AngularJS Failed Resource GET의 중복 가능성이 있습니까?
MilkyWayJoe 2012-08-15

1
아니요, 응용 프로그램에 대해 전역 오류 401 처리기를 수행하려고합니다
cricardol

롤, 당신은 당신이 원하는 것을 고려했지만 다른 http 상태 (변경할 수 있음)를 가지고 있습니까? 어쨌든, pkozlowski.opensource의 대답 쇼 당신은 그것을 수행하는 방법에
MilkyWayJoe

아니요, Justen의 답변과 훨씬 비슷합니다 ... 이것은 당신이 말하는 질문과 중복되지 않습니다
cricardol

답변:


97

저는 또한 angular로 웹 사이트를 구축하고 있는데 글로벌 401 처리에 대해 이와 동일한 장애물을 발견했습니다. 이 블로그 게시물을 보았을 때 http 인터셉터를 사용하게되었습니다. 내가 한 것처럼 도움이 될 것입니다.

"AngularJS (또는 유사) 기반 애플리케이션의 인증." , espeo 소프트웨어

편집 : 최종 솔루션

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'], function ($routeProvider, $locationProvider, $httpProvider) {

    var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;

            if (status == 401) {
                window.location = "./index.html";
                return;
            }
            // otherwise
            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

4
$ q.reject (response); 반환해야합니다. == 상태 (401)는 잡음이 각도 오차 방지하는 경우
s_t_e_v_e

1
@daniellmb. 때에 따라 다르지. 보기 만 변경하는 것이 아니라 실제로 다른 페이지로 이동하려면 실제로 $ window를 사용해야합니다. 로그인 페이지가 앵귤러가있는 또 다른보기 및 컨트롤러 인 경우 $ location.path
uriDium

1
@uriDium 오른쪽 내 요점은 각도로 제공된 객체를 사용하여 모의하고 테스트 할 수 있다는 것입니다.
daniellmb

22
$ httpProvider.responseInterceptors는 이제 더 이상 사용되지 않습니다. docs.angularjs.org/api/ng.$http#description_interceptors를 참조하십시오 .
quartzmo 2014

1
성공하면 return response || $q.when(response);응답이 비어 있으면 promise 객체도 반환되도록 다음 과 같이 반환해야합니다 .
Ashish Gaur 2015

77

responseInterceptor는 Angular 1.1.4에서 더 이상 사용되지 않습니다. 아래에서 인터셉터를 구현하는 새로운 방법을 보여주는 공식 문서를 기반으로 한 발췌 본을 찾을 수 있습니다 .

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise;
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

이것은 Coffeescript를 사용하여 내 프로젝트에서 어떻게 보이는지입니다.

angular.module("globalErrors", ['appStateModule']).factory "myHttpInterceptor", ($q, $log, growl) ->
  response: (response) ->
    $log.debug "success with status #{response.status}"
    response || $q.when response

  responseError: (rejection) ->
    $log.debug "error with status #{rejection.status} and data: #{rejection.data['message']}"
    switch rejection.status
      when 403
        growl.addErrorMessage "You don't have the right to do this"
      when 0
        growl.addErrorMessage "No connection, internet is down?"
      else
        growl.addErrorMessage "#{rejection.data['message']}"

    # do something on error
    $q.reject rejection

.config ($provide, $httpProvider) ->
  $httpProvider.interceptors.push('myHttpInterceptor')

그러나 responseError 인터셉터에는 xhr 데이터 또는 기타 유용한 정보가 없습니다. 복구 가능한지 결정하는 것도 사용할 수 없습니다.
zw0rk

1
@ zw0rk 당신은 ... 내부 responseError, rejection당신이 필요로하는 모든 것을 갖추고 있습니다.
Langdon 2014 년

그 마지막 줄 $httpProvider...config()블록에 싸여 있습니까?
delwin 2014

실제로 Coffeescript를 사용하여 프로젝트에서 어떻게 수행했는지 보여주기 위해 내 대답을 편집했습니다. Javascript에서 선호하는 경우 js2coffee.org를 사용하십시오 .
MikeR 2014

에 대한 모든 참조해야 response언더 responseError기능이 실제로에 대한 참조를 할 수는 rejection(또는 어쩌면 매개 변수의 이름으로 변경해야 response?
아담 Nofsinger에게

16

다음 <script type="text/javascript" src="../js/config/httpInterceptor.js" ></script>내용으로 파일 을 만듭니다 .

(function(){
  var httpInterceptor = function ($provide, $httpProvider) {
    $provide.factory('httpInterceptor', function ($q) {
      return {
        response: function (response) {
          return response || $q.when(response);
        },
        responseError: function (rejection) {
          if(rejection.status === 401) {
            // you are not autorized
          }
          return $q.reject(rejection);
        }
      };
    });
    $httpProvider.interceptors.push('httpInterceptor');
  };
  angular.module("myModule").config(httpInterceptor);
}());

@ThilakRaj 위 코드는 모든 http 요청에서 실행되어야합니다. 따라서 Chrome에서 두 개의 중단 점을 만드십시오. 하나는 'return response'줄에, 다른 하나는 'return $ q.reject'에 있어야 제대로 실행되는지 확인합니다.
Jan-Terje Sørensen
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.