반응형
Ajax 콜 체인에 의한 AngularJs
연쇄적으로 여러 개의 Ajax 통화를 하고 싶습니다.하지만 다음 전화를 걸기 전에 매 통화 후에 데이터를 마사지하고 싶습니다.마지막으로 All calls가 성공하면 다른 코드를 실행하고 싶습니다.
저는 Ajax 통화에 Angular $http 서비스를 사용하고 있으며, 그것을 고수하고 싶습니다.
가능합니까?
네, Angular에서 아주 우아하게 처리해 주셨어요.이후 JS는$http
서비스는 Promise를 기반으로 구축됩니다.API입니다. 기본적으로,$http
메서드는 약속을 반환하고 당신은 매우 쉽게 약속을 묶을 수 있습니다.then
방법.다음은 예를 제시하겠습니다.
$http.get('http://host.com/first')
.then(function(result){
//post-process results and return
return myPostProcess1(result.data);
})
.then(function(resultOfPostProcessing){
return $http.get('http://host.com/second');
})
.then(function(result){
//post-process results of the second call and return
return myPostProcess2(result.data);
})
.then(function(result){
//do something where the last call finished
});
후처리와 다음 처리를 조합할 수도 있습니다.$http
기능 또한 모두 결과에 관심이 있는 사람에 따라 달라집니다.
$http.get('http://host.com/first')
.then(function(result){
//post-process results and return promise from the next call
myPostProcess1(result.data);
return $http.get('http://host.com/second');
})
.then(function(secondCallResult){
//do something where the second (and the last) call finished
});
인정된 답변은 좋지만, 그것은 정말 금상첨화인 함정과 방법을 설명해주지 않는다.약속에 관한 이 훌륭한 기사는 나를 바로 잡는다.다음은 해당 문서를 기반으로 한 샘플 코드입니다.
$scope.spinner.start();
$http.get('/whatever/123456')
.then(function(response) {
$scope.object1 = response.data;
return $http.get('/something_else/?' + $scope.object1.property1);
})
.then(function(response) {
$scope.object2 = response.data;
if ($scope.object2.property88 == "a bad value")
throw "Oh no! Something failed!";
return $http.get('/a_third_thing/654321');
})
.then(function(response) {
$scope.object3 = response.data;
})
.catch(function(error) {
// this catches errors from the $http calls as well as from the explicit throw
console.log("An error occured: " + error);
})
.finally(function() {
$scope.spinner.stop();
});
언급URL : https://stackoverflow.com/questions/16284403/chaining-ajax-calls-in-angularjs
반응형
'source' 카테고리의 다른 글
tsconfig.json 파일과 함께 TypeScript를 사용할 때 json 파일을 포함할 수 있습니까? (0) | 2023.02.09 |
---|---|
입력 요소에서 angularjs 필터 사용 (0) | 2023.02.09 |
Angular를 사용하는 방법JS ng-repeat은 Twitter Bootstrap의 비계를 가지고 있습니까? (0) | 2023.02.09 |
WordPress 후크의 익명 함수 (0) | 2023.02.09 |
Wordpress 테마에서 사용자 정의 클래스 사용 (0) | 2023.02.09 |