Angular의 Promise 객체($q 소개)_AngularJS

JQuery를 사용하면서 Promise가 JS 비동기 프로그래밍 모델이라는 것은 알았지만 JQuery의 deferred 객체와 차이점을 잘 이해하지 못했습니다. 회사의 프로젝트가 진행되면서 백엔드로부터 데이터를 받아야 했기 때문에 이를 완료하기로 결정했습니다.

약속

Promise는 비동기 이벤트를 동기식 연산 프로세스의 형태로 동작시키는 모드로, 중첩 레이어를 피하고, 비동기 이벤트를 체인으로 동작시킬 수 있습니다.

우리는 JavaScript 비동기 코드를 작성할 때 콜백이 가장 간단한 메커니즘이라는 것을 알고 있습니다. 그러나 이 메커니즘을 사용하면 제어 흐름, 예외 처리 및 함수 의미가 희생되어야 하며 심지어 콜백 함정에 빠질 수도 있습니다. 약속은 이 문제를 해결합니다.

ES6의 Promise, AngularJS 내장 Q가AngularJS에 내장되어 있고 Promises/A 사양을 채택하면 다음과 같습니다.

각 작업에는 보류, 완료, 거부의 세 가지 상태가 있습니다.

1.보류 상태: 이행 또는 거부 상태로 전환될 수 있습니다.
2. Fulfilled 상태 : 다른 상태로 변경될 수 없으며, 상태는 값을 가지고 있어야 합니다.
3. 거부된 상태: 다른 상태로 변경될 수 없으며, 그 상태는 변경될 수 없는 사유가 있어야 합니다.

상태 이전은 일회성입니다. 상태가 이행(완료)되거나 실패(실패/거부)되면 다시 변경할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

함수 okToGreet(이름){
반환 이름 === '로빈후드';
}

함수 asyncGreet(이름) {
var deferred = $q.defer();

setTimeout(함수() {
// 이 비동기 함수 fn은 향후 비동기적으로 실행될 예정이므로 모델 변경 사항을 올바르게 관찰하면서 코드를 $apply 호출로 래핑합니다
$scope.$apply(함수() {
              deferred.notify('' 이름'을 인사하려고 합니다.');

                 if (okToGreet(이름)) {
                   deferred.resolve('안녕하세요, ' 이름 '!');
              } else {
                    deferred.reject(''이름' 인사말은 허용되지 않습니다.');
            }
        });
}, 1000);

deferred.promise 반환;
}

var promise = asyncGreet('로빈후드');
promise.then(함수(인사말) {
Alert('성공: ' 인사말);
}, 함수(이유) {
Alert('실패: ' 이유);
}, 함수(업데이트) {
Alert('알림을 받았습니다: ' update);
});

Q Promise 기본 사용법

위 코드는 $q.defer()에 의해 생성된 지연된 인스턴스의 여러 메서드의 역할을 보여줍니다. 비동기 작업이 성공하면 Resolve 메서드를 사용하여 Promise 개체의 상태를 "성공"으로 변경합니다(즉, 보류 중에서 해결됨으로). 비동기 작업이 실패하면 거부 메서드를 사용하여 상태를 "실패"로 변경합니다. (즉, 보류 중에서 해결됨으로). 마지막으로 deferred.promise가 반환되고 체인에서 then 메서드를 호출할 수 있습니다.

JS에는 기본 Promise가 있고, ES6에는 이미 Promise 개체가 있으며, Firefox 및 Chrome 32 베타 버전에서는 기본 Promise API가 구현되었습니다.

AngularJ의 $q.deferd

$q.deferd를 호출하여 지연된 개체를 체인 호출로 반환합니다. 이 객체는 API를 통해 Promises/A 사양의 세 가지 작업 상태를 연결합니다.

지연 API

지연된 객체의 방법

1.resolve(value): Resolve() 선언에서 Promise 객체가 보류 상태에서 해결로 변경됨을 나타냅니다.
2.reject(reason): 해결() 선언에서 Promise 객체가 보류 상태에서 거부됨 상태로 변경됨을 나타냅니다.
3.notify(value): inform()이 선언되면 Promise 객체의 미완료 상태를 나타내며 해결 또는 거부 전에 여러 번 호출될 수 있습니다.

지연된 개체 속성

promise: 최종적으로 반환되는 것은 원래 지연된 객체가 아닌 새로운 지연된 객체 promise 속성입니다. 이 새로운 Promise 객체는 원래 Promise 객체의 상태만 관찰할 수 있으며 작업 상태가 외부에서 수정되는 것을 방지하기 위해 지연된 객체의 내부 상태를 수정할 수 없습니다.

프라미스 API

Deferred 인스턴스가 생성되면 새로운 Promise 객체가 생성되며 deferred.promise를 통해 참조를 얻을 수 있습니다.

Promise 객체의 목적은 지연된 작업이 완료되면 관심 있는 부분이 실행 결과를 얻을 수 있도록 하는 것입니다.

Promise 객체 메서드

1.then(errorHandler,fulfiledHandler, ProgressHandler): then 메소드는 Promise의 다양한 상태를 모니터링하는 데 사용됩니다. errorHandler는 실패 상태를 모니터링하고,fulfiledHandler는 이행 상태를 모니터링하며, ProgressHandler는 미완료(불완전) 상태를 모니터링합니다. 또한 알림 콜백은 0회 이상 호출될 수 있으며, 해결 또는 거부(해결 및 거부) 전 진행 상황 표시를 제공합니다.
2.catch(errorCallback) - promise.then(null, errorCallback)
의 단축키 3.finally(콜백) - Promise의 실행 또는 거부 여부를 관찰할 수 있지만 최종 값을 수정하지 않고 관찰할 수 있습니다. 이는 Promise가 거부되거나 해결되었는지 여부에 관계없이 리소스를 해제하거나 사용하지 않는 개체를 정리하는 작업을 수행하는 데 사용할 수 있습니다. 자세한 내용은 전체 설명서 사양을 참조하세요.

Promise 체인 호출은 then() 메서드를 통해 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

promiseB = promiseA.then(함수(결과) {
결과 1 반환
})

// promiseA가 처리된 직후 promiseB가 처리됩니다.
// 그리고 그 값은 promiseA가 1만큼 증가한 결과입니다.

$q의 다른 방법

$q.when(value): 변수 값을 전달하면 promise.then()이 성공적인 콜백을 실행합니다
$q.all(promises): 성공 콜백이 실행되기 전에 여러 약속이 성공적으로 실행되어야 합니다. 전달된 값은 배열 또는 해시 값입니다. 배열의 각 값은 Index
에 해당하는 약속 개체입니다.