Angular 비동기 화 처리 방법

1.배경
전단 항목 에 서 는 페이지 에 여러 개의 인터페이스 가 있 는 경우 가 많 습 니 다.다음 인터페이스 파 라 메 터 는 이전 인터페이스의 반환 데이터 에서 가 져 와 야 합 니 다.이 는 인터페이스 가 순서대로 실행 되 어야 합 니 다.Angular 가 제공 하 는 Http 서비스 요청 인 터 페 이 스 는 모두 비동기 요청 이기 때문에 보통 다음 과 같은 코드 로 쓰 입 니 다.

funA(arg1,arg2,function(){
 funcB(arg1,arg2,function(){
  funcC(arg1,arg2,function(){
    xxxx....
  })
 }) 
});

이 는 페이지 코드 가 혼 란 스 러 워 유지 하기 어 려 울 뿐만 아니 라 개발 자 들 로 하여 금 코드 의 운행 을 추적 할 수 없 게 한다.그 자체 가 끼 워 져 있어 이해 하기 어 려 운 데다 가 언제 쯤 리 턴 이 일어 날 지 모 르 는 것 은 설상가상 이다.
2. Promise
이 현상 에 대해 Angular 는 Promise 규범 을 내 놓 았 습 니 다.개발 자 들 이 비동기 화 를 동기 화 하 는 데 도움 을 줄 수 있 고 실행 결과 에 대한 불확실 한 사전 정의 입 니 다.예 를 들 어 다음 코드 에서 getData 방법 내의 대상 이 성공 적 으로 실행 되면 success 방법 을 호출 하고 실패 하면 error 방법 을 호출 합 니 다.또한 promise 는 then 방법 외 에 catch()와 finally()방법 도 있다.

defer. getData()
.then( funcSuccess (){}, funcError (){} )
.catch( function(){})
.finally( function(){});

Finally()방법 은 일반적으로 promise 가 성공 으로 돌아 가 든 실패 로 돌아 가 든 모두 실행 되 는 작업 을 처리 하 는 데 쓰 인 다.예 를 들 어 ionic 의 위로 끌 어 올 리 기 는 데 이 터 를 가 져 온 후에 성공 하 든 실패 하 든 방송 이 끝나 면 이 조작 을 finally()방법 에 쓸 수 있 습 니 다.
3.$q 서비스
q 서 비 스 는 AngularJs 에서 자체 패키지 로 이 루어 진 Promise 실현 으로 보통 다음 과 같은 세 가지 상용 방법 이 있 습 니 다.
defer():deferred 대상 을 만 듭 니 다.이 대상 은 resolve,reject,notify 등 자주 사용 하 는 방법 을 실행 할 수 있 습 니 다.
all():Promise 의 배열 에 들 어가 대량으로 실행 하고 Promise 대상 을 되 돌려 줍 니 다.
when():불확실 한 매개 변 수 를 입력 하고 Promise 표준 에 부합 되면 Promise 대상 을 되 돌려 줍 니 다.
3.1.defer()방법
$q 서비스 에서 defer()방법 으로 deferred 대상 을 만 든 다음 에 이 대상 은 resolve 방법 으로 성공 상 태 를 정의 할 수 있 습 니 다.reject 방법 으로 실패 상 태 를 정의 하고 이 방법 에서 파 라 메 터 를 전달 할 수 있 습 니 다.일반 인터페이스 에서 돌아 오 는 데 이 터 는 모두 이 방법 으로 전 달 됩 니 다.마지막 으로 deferred 대상.promise 를 통 해 promise 대상 을 되 돌려 then 방법 을 정의 합 니 다.then 방법 중 세 가지 매개 변 수 는 성공 적 인 리 셋,실패 리 셋,상태 변경 리 셋 이다.
정의 방법:

function funA(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funA success');
 }else{
 defer.reject('funA error');
 }
 return defer.promise;
}

방법 호출(성공 복귀):

funA(3).then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

결과:

방법 호출(반환 실패):

funA(8).then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

결과:

3.2 체인 호출
defer()방법 과 then()방법 을 알 게 되면 여러 개의 인터페이스 내장 호출 문 제 를 해결 할 수 있 습 니 다.
일반적으로 여러 개의 인 터 페 이 스 를 처리 할 때,angular 의 체인 호출 을 사용 할 수 있 습 니 다.즉,:

FunA.then().then().then();

then 방법 에서 return 이 호출 할 다음 인터페이스 입 니 다.다음 funA,funB,funC 는 모두 promise 대상 을 되 돌려 주 는 방법 입 니 다.실행 순서 가 funA,funB,funC 라면 체인 으로 호출 할 수 있 습 니 다.

function funA(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funA success');
 }else{
 defer.reject('funA error');
 }
 return defer.promise;
}
 
function funB(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funB success');
 }else{
 defer.reject('funB error');
 }
 return defer.promise;
}
 
function funC(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funC success');
 }else{
 defer.reject('funC error');
 }
 return defer.promise;
}

방법 호출:

funA(3).then(function(success){
 console.log(success);
 return funB(3);
}).then(function(success){
 console.log(success);
 return funC(3);
}).then(function(success){
 console.log(success);
},function(err){
 console.log(err);
});

결과:

상기 방법 호출 에서 then()방법 에는 성공 적 인 매개 변수 만 적 혀 있 습 니 다.만약 에 그 중의 한 방법 이 호출 에 실패 하면 이 방법 뒤의 방법 은 더 이상 실행 되 지 않 습 니 다.즉,앞의 방법 이 성공 적 으로 호출 되 어야 뒤의 방법 을 호출 할 수 있 습 니 다.다음 과 같은 방법 이 실 패 했 습 니 다.funB 방법 호출 이 실 패 했 을 경우 funC 를 실행 하지 않 고 잘못된 정 보 는 마지막 으로 잘못된 정 보 를 캡 처 하 는 매개 변수 방법 에서 얻 을 수 있 습 니 다.
방법 호출:

funA(3).then(function(success){
 console.log(success);
 return funB(8);
}).then(function(success){
 console.log(success);
 return funC(3);
}).then(function(success){
 console.log(success);
},function(err){
 console.log(err); //  funB()     
});

결과:

만약 에 특정한 장면 에서 이전 방법 이 호출 되 기 를 기다 리 고 이 방법 이 성공 적 으로 호출 되 었 든 안 되 었 든 뒤의 방법 을 계속 호출 하려 면 then()방법 에서 오류 리 셋 을 추가 하고 다음 에 실 행 된 promise 를 return 해 야 합 니 다.다음 과 같다.

funA(3).then(function(success){
 console.log(success);
 return funB(8);
},function(err){
 console.log(err);
 return funB(8);
}).then(function(success){
 console.log(success);
 return funC(3);
},function(err){
 console.log(err);
 return funC(3);
}).then(function(success){
 console.log(success);
},function(err){
 console.log(err);
});

결과:

3.3.all()방법
all()방법 은 여러 promise 의 배열 을 하나 로 합 칠 수 있다.모든 promise 가 실 행 된 후에 뒤의 리 셋 을 실행 합 니 다.리 셋 의 인 자 는 모든 promise 가 실 행 된 결과 입 니 다.

function funA(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funA success');
 }else{
 defer.reject('funA error');
 }
 return defer.promise;
}
 
function funB(num){
 var defer = $q.defer();
 if(num<5){
 defer.resolve('funB success');
 }else{
 defer.reject('funB error');
 }
 return defer.promise;
}

방법 호출:

$q.all([
 funA(3), 
 funB(3)
 ])
.then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

결과:

all()방법 중의 매개 변 수 는 위의 배열 형식 일 수도 있 고 json 형식 일 수도 있다.이에 따라 매개 변수 가 배열 형식 이 라면 되 돌아 오 는 데이터 형식 도 배열 형식 입 니 다.인자 가 json 형식 이 라면 되 돌아 오 는 데이터 형식 도 json 형식 입 니 다.json 매개 변 수 는 다음 과 같 습 니 다.

$q.all(
 {
 funA:DeferService.funA(3),
 funB:DeferService.funB(3)
 })
.then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

결과:

위의 두 예 는 모두 데 이 터 를 얻 는 데 성공 한 상황 을 보 여 준다.한편,all()방법의 매개 변수 에 promise 가 실 패 했 을 때 전체 작업 이 실 패 했 고 돌아 온 데이터 도 실패 한 매개 변수의 실패 정 보 를 되 돌려 줄 수 밖 에 없습니다.
방법 호출:

$q.all(
 {
 funA:DeferService.funA(8), //    
 //          ，   funA    ，        
 funB:DeferService.funB(3) 
})
.then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

결과:

3.4.when()방법
when()방법 중의 매개 변 수 는 하나의 값 일 수도 있 고 promise 일 수도 있 습 니 다.이 방법 은 들 어 오 는 매개 변 수 를 promise 로 포장 하 는 것 입 니 다.이 방법 은 일반적으로 처리 대상 이나 호출 방법 이 promise 인지 아 닌 지 를 확인 하지 못 할 때 사용 합 니 다.
예 를 들 어 아래 의 예 에서 val=10 은 promise 가 아니 지만 when()방법 으로 포장 한 후에'then()방법 으로 호출 할 수 있 습 니 다.일반적인 promise 를 처리 하 는 것 과 같 습 니 다.

var val=10;
$q.when(val)
 .then(function(success){
 console.log(success);
 },function(err){
 console.log(err);
 });

결과:

이상 의 Angular 비동기 화 처리 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 어 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.