Promise
Promise
: A promise is an object that may produce a single value some time in the future
프로미스는 자바스크립트 비동기 처리에 사용되는 객체
프로미스의 3가지 상태 (처리 과정)
- Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
- Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
Pending (대기)
- new Promise() 매서드를 호출할 때 콜백 함수를 선언할 수 있음
- 콜백 함수 인자는 resolve, reject
new Promise(function(resolve, reject){
// ...
});
Fulfilled (이행)
- 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 됨
- 그리고 이행 상태가 되면 then()을 이용해서 처리 결과 값을 받을 수 있음
- then()은 resolve()에 전달 인자로 넣어준 값을 리턴함!
new Promise(function(resolve, reject) {
resolve();
});
Rejected (실패)
- reject를 호출하면 실패(Rejected) 상태가 됨
- 실패 상태가 되면 실패한 이유(실패 처리 결과 값)를 catch() 로 받을 수 있음
- catch()는 reject()에 전달 인자로 넣어준 값을 리턴함!
new Promise(function(resolve, reject) {
reject();
});
Promise.prototype.then()
- then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받음
- 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수
p.then(onFulfilled, onRejected);
p.then(function(value)){
// 이행
}, function(reason){
// 거부
});- 매개 변수
onFulfilled: Promise가 수행될 때 호출되는 Function으로, 이행 값 하나를 인수로 받음
onRejected : Promise가 거부 될 때 호출하는 Function으로, 거부 이유 하나를 인수로 받음
Promise.prototype.catch()
: the catch() method returns a Promise and deal with rejected cases only.
p.catch(onRejected)
p.catch(function(reason) {
// rejection
})여러 개의 프로미스 연결하기 (Promise Chaining)
- then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환 아래의 형식 참고
function getData() {
return new Promise({
// ...
});
}
// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
.then(function(data) {
// ...
})
.then(function() {
// ...
})
.then(function() {
// ...
});
- 프로미스 객체 하나를 생성하고 setTimeout()을 이용해 2초 후에 resolve()를 호출하는 예제
- resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫번째 .then() 로직으로 넘어감
- 첫 번째 ,then()에서는 이행된 결과 값 1을 받아서 그 다음 .then() 으로 넘겨줌
- 두 번째 .then()에서도 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨 줌
- 마지막 .then()에서 최종 결과 값 31 출력