Promise

프로미스란?

프로미스는 자바스크립트 비동기 처리에 대한 문제점을 보완하기 위해 사용되는 객체

ie 에서는 미지원

프로미스의 3가지 상태(states)

• Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

프로미스 처리 흐름도(출처 : MDN)

Pending (대기)

new Promise() 메서드를 호출하면 대기(Pending) 상태가 되며. 콜백 함수의 인자로는 resolve, reject

new Promise(function(resolve, reject) {
 // ...
});

Fulfilled (이행)

함수의 인자를 실행을 하면 이행(Fulfilled) 상태가 된며, then()을 이용하여 처리 결과를 받을 수 있다.

function testPromise() {
    return new Promise(function(resolve, reject) {
    	console.log("비동기적 코드 실행");
    	resolve(1);
    });
}

testPromise().then(function(resolve) {
	console.log(resolve + "비동기적 코드 종료");
});

Rejected (실패)

Promise() 객체는 실패 콜백함수를 받는 방법이 2가지 존재한다.

 

첫번째 - then() 에서 두번째 인자를 이용을 하는 방법

첫 번째 콜백 함수 내부에서 오류가 발생 하는 경우 오류를 제대로 잡아내지 못하는 오류가 발생

 

function testPromise() {
    return new Promise(function(resolve, reject) {
    	console.log("비동기적 코드 실행");
    	resolve(1);
    });
}

testPromise().then(function(resolve) {
	console.log(resolve + "비동기적 코드 종료");
}, function(error) {
	console.log(error);
});

두번째 - catch() 를 이용하는 방법

function testPromise() {
    return new Promise(function(resolve, reject) {
    	console.log("비동기적 코드 실행");
    	resolve(1);
    });
}

testPromise().then(function(resolve) {
	console.log(resolve + "비동기적 코드 종료");
}).catch(function(error) {
	console.log(error);
});

 

여러 개의 프로미스 연결 (Promise Chaining )

then() 메서드를 이용해 여러 개의 프로미스를 연결하여 사용이 가능하다.

function testPromise() {
    return new Promise(function(resolve, reject) {
    	console.log("비동기적 코드 실행");
    	resolve(1);
    });
}

testPromise().then(function(resolve) {
	console.log(resolve + " 1 비동기적 코드 종료");
    return 1;
}).then(function(res) {
	console.log(res + " 2 비동기적 코드 종료");
    return 2;
}).then(function(res) {
	console.log(res + " 3 비동기적 코드 종료");
});

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://github.com/mdn/js-examples/tree/master/promises-test