웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
AngluarJs에서 비동기 방식의 ajax를 $http 서비스를 사용하여 수행할 수 있습니다. 이때 만약 request에 대한 특정 명령이나 취소 등을 수행하려면 어떻게 할 수 있을지 아래에서 알아봅니다. 우선 취소하는 방법 부터 알아봅니다.
# $http 요청 취소하는 방법
먼저 취소를 위해서는 현재 pending된 request가 있는지 알아야합니다. 이때 $http 서비스 객체의 pendingRequests 프로퍼티를 확인하여 어떤 요청이 진행 중인지 확인할 수 있죠. 아래 예제는 취소가 필요한 상황에 cancelRequest()라는 함수를 동작시켜 취소하고자 합니다.
# $http 요청 발생시 코드 실행하기
아래는 $http 서비스에 요청이 발생, pending된 명령이 발생할 경우 해동 코드를 실행하게되는 매우 간단한 방법입니다. 이때 request를 알기 위하여 $watch를 사용하였습니다. 참고로 아래 예제는 취소를 수행하였지만 다른 명령어를 수행하는 것 역시 가능할 것입니다.
그럼 아래에서 또 다른 방법을 알아봅니다.
# $rootScope의 $routeChangeStart 이벤트를 사용하기
이 방법 역시 간단합니다. $http 서비스에 $rootScope를 사용하여 이벤트를 등록하여 처리하는 방법입니다. 다만 $http 요청시 timeout 및 cancel에 대하여 값을 추가해주어야 합니다. 예를들어...
여기까지 다양한 방법의 $http request를 처리 및 취소에 대하여 알아봤습니다.
# $http 요청 취소하는 방법
먼저 취소를 위해서는 현재 pending된 request가 있는지 알아야합니다. 이때 $http 서비스 객체의 pendingRequests 프로퍼티를 확인하여 어떤 요청이 진행 중인지 확인할 수 있죠. 아래 예제는 취소가 필요한 상황에 cancelRequest()라는 함수를 동작시켜 취소하고자 합니다.function cancelRequest() {
angular.forEach($http.pendingRequests, function(request) {
if (request.cancel) request.cancel.resolve();
};
};
cancelRequest()를 실행하면 현재 pending중인 요청을 찾아 resolve()시켜 취소하도록 만들게됩니다.angular.forEach($http.pendingRequests, function(request) {
if (request.cancel) request.cancel.resolve();
};
};
# $http 요청 발생시 코드 실행하기
아래는 $http 서비스에 요청이 발생, pending된 명령이 발생할 경우 해동 코드를 실행하게되는 매우 간단한 방법입니다. 이때 request를 알기 위하여 $watch를 사용하였습니다. 참고로 아래 예제는 취소를 수행하였지만 다른 명령어를 수행하는 것 역시 가능할 것입니다.
$scope.$watch(function() {
return $http.pendingRequests.length;
}, function() {
angular.forEach($http.pendingRequests, function(request) {
if (request.cancel) request.cancel.resolve(); // Cancel Request
};
});
참고로 pendingRequests는 배열로 값을 가지게 됩니다. 그래서 아래처럼 해당 배열에 위치한 요청만 취소 등의 동작이 가능합니다.
return $http.pendingRequests.length;
}, function() {
angular.forEach($http.pendingRequests, function(request) {
if (request.cancel) request.cancel.resolve(); // Cancel Request
};
});
if ($http.pendingRequests[3].cancel) $http.pendingRequests[3].cancel.resolve();
그럼 아래에서 또 다른 방법을 알아봅니다.
# $rootScope의 $routeChangeStart 이벤트를 사용하기
이 방법 역시 간단합니다. $http 서비스에 $rootScope를 사용하여 이벤트를 등록하여 처리하는 방법입니다. 다만 $http 요청시 timeout 및 cancel에 대하여 값을 추가해주어야 합니다. 예를들어...
var config = {
method: 'get',
url: 'webisfree.com/action',
data: { id: 123 },
timeout: cancel.promise,
cancel: cancel
};
이제 아래처럼 $routeChangeStart 이벤트를 소스코드에 추가합니다.method: 'get',
url: 'webisfree.com/action',
data: { id: 123 },
timeout: cancel.promise,
cancel: cancel
};
$rootScope.$on('$routeChangeStart', function (evt, next, current) {
$http.pendingRequests.forEach(function(request) {
if (request.cancel) { request.cancel.resolve(); }
});
});
$http.pendingRequests.forEach(function(request) {
if (request.cancel) { request.cancel.resolve(); }
});
});
여기까지 다양한 방법의 $http request를 처리 및 취소에 대하여 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
- [자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법
자바스크립트 FormData 데이터 전송 알아보기
제이쿼리 when() 메소드 알아보기- jquery post method
자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제
자바스크립트 이미지핑 기술 알아보기- CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법
- 제이쿼리 ajax 사용시 timeout 대기시간 설정하는 방법은?