AngularJs HTTP 응답 인터셉터_AngularJS를 빠르게 학습합니다.-JS 튜토리얼-php.cn

AngularJs HTTP 응답 인터셉터_AngularJS를 빠르게 학습합니다.

WBOY

풀어 주다： 2016-05-16 15:22:21

원래의

1999명이 탐색했습니다.

언제든지 인증, 오류 처리 등과 같은 전역 기능을 요청에 추가하려는 경우 요청이 서버로 전송되기 전이나 서버가 반환될 때 요청을 가로채는 것이 더 좋은 방법입니다.

angularJs는 인터셉터를 통해 전역 수준에서 처리하는 방법을 제공합니다.

4가지 유형의 인터셉터

요청을 가로채는 요청 메소드 구현

request: function(config) {
// do something on request success
return config || $q.when(config);
}

로그인 후 복사

이 메소드는 $http가 백그라운드로 요청을 보내기 전에 실행되므로 구성을 수정하거나 다른 작업을 수행할 수 있습니다. 이 메소드는 요청 구성 객체를 매개변수로 수신하고 구성 객체 또는 Promise를 반환해야 합니다. 잘못된 구성 개체 또는 약속이 반환되면 거부되어 $http 호출이 실패하게 됩니다.

요청 예외를 차단하는 requestError 메소드 구현

requestError: function(rejection) {
　　// do something on request error　　return $q.reject(rejection);
}

로그인 후 복사

요청이 전송되지 않거나 인터셉터에 의해 거부되는 경우가 있습니다. 요청 예외 인터셉터는 이전 요청 인터셉터에 의해 중단된 요청을 캡처합니다. 요청을 복원하거나 때로는 진행률 표시줄 닫기, 버튼 및 입력 상자 활성화 등 요청 이전에 수행한 구성을 실행 취소하는 데 사용할 수 있습니다.

응답을 가로채는 응답 메소드 구현

response: function(response) {
　　// do something on response success
return response || $q.when(response);}

로그인 후 복사

이 메서드는 $http가 백그라운드에서 응답을 받은 후에 실행되므로 응답을 수정하거나 다른 작업을 수행할 수 있습니다. 이 메서드는 응답 개체를 매개변수로 받고 응답 개체나 약속을 반환해야 합니다. 응답 개체에는 백그라운드의 요청 구성, 헤더, 상태 및 데이터가 포함됩니다. 잘못된 응답 객체가 반환되거나 약속이 거부되면 $http 호출이 실패합니다.

응답 예외를 차단하는 responseError 메소드 구현

responseError: function(rejection) {
// do something on response error　　return $q.reject(rejection);
}

로그인 후 복사

때때로 백그라운드 호출이 실패하거나 요청 인터셉터에 의해 거부되거나 이전 응답 인터셉터에 의해 중단될 수 있습니다. 이 경우 응답 예외 인터셉터는 백그라운드 호출을 재개하는 데 도움이 될 수 있습니다.

인터셉터 코어

감청 서비스 공장

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
　　 requestError: function(rejection) {
　　　　 // do something on request error
　　　　 return $q.reject(rejection)
　　 },
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]);

로그인 후 복사

차단공장 방식 등록

app.config(["$httpProvider", function($httpProvider) {
　　$httpProvider.interceptors.push("httpInterceptor");
}]);

로그인 후 복사

예

401, 404 차단 및 처리

app.config(["$httpProvider", function($httpProvider) { 
$httpProvider.interceptors.push('httpInterceptor'); 
}]); 
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"responseError": function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
}
else if (response.status === 404) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

로그인 후 복사

위 콘텐츠는 AngularJ의 HTTP 응답 인터셉터를 빠르게 학습하는 관련 지식을 여러분과 공유하기 위한 것입니다. 마음에 드셨으면 좋겠으며, Script House 웹사이트에 대한 지속적인 지원에 감사드립니다.