[자바스크립트] 프로미스 - Promise Handler

프로미스의 개념과 기본 사용법

[자바스크립트] 프로미스 - 개념 & 기본 사용법

 

저번 포스팅에서는 프로미스의 탄생 배경과 개념, 그리고 기본 사용법에 대해서 알아 보았다. 이번 포스팅에서는 프로미스 객체의 상태에 대해 후속 처리를 하는 프로미스 핸들러에 대해서 알아보겠다.

 

 

프로미스 3가지 상태

프로미스 핸들러에 대해서 알아보기 전에, 먼저 프로미스의 3가지 상태에 대해서 알아보겠다. 프로미스는 비동기 작업의 결과에 대한 약속 객체를 반환한다고 하였다. 그렇기 때문에 new Promise() 생성자로 프로미스 객체를 생성하게 되면, 해당 비동기 작업은 진행중을 거쳐 성공 또는 실패에 대한 결과를 반환하게 된다.

 

이 때의 이러한 진행중, 성공, 실패 상태를 나타내는 것이 프로미스의 상태라고 한다.

상태	설명
Pending(대기)	처리가 완료되지 않은 상태 ( 진행중 )
Fulfilled(이행)	성공적으로 처리가 완료된 상태 ( resolve )
Rejected(거부)	처리가 실패로 끝난 상태 ( reject )

 

모든 promise 객체는 pending 상태를 거쳐, fulfilled 또는 rejected 상태가 되는 것이다. 각각의 상태에 대해서 좀 더 디테일하게 살펴보자.

 

 

Pending 상태 : 진행 중

pending 상태란, 대기라는 말 그대로 비동기 처리에 대한 완료를 대기하고 있는 상태를 말한다. 아래의 코드를 살펴보면 프로미스 객체를 생성하고, 생성한 프로미스 객체가 완료되기 전에 해당 프로미스 객체를 콘솔 창에 출력해보면 pending으로 출력되는 결과를 볼 수 있다.

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("처리 완료")
    }, 5000)
});
console.log(promise); // Promise { <pending> }

 

 

Fulfilled 상태 : 이행

fulfilled 상태는 해당 비동기 작업이 처리가 성공적으로 되었음을 나타내는 상태이다. 위의 코드에서 promise가 종료된 뒤 다시 promise를 출력해보면 아래와 같이 fulfilled 상태를 띄우는 것을 볼 수 있다.

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("처리 완료")
    }, 5000)
});

setTimeout(() => {
    console.log(promise); // Promise { '처리 완료' } => fulfilled
}, 6000);

 

5초가 지나 promise 객체가 resolve를 통해 성공을 알리는 객체를 호출하였으므로 이행 상태로 변하게 되고, 이를 출력하니 위와 같이 처리 완료( fulfilled ) 상태가 출력되는 것을 볼 수 있다.

 

그리고 promise 객체가 이행 상태가 되면, .then() 메소드를 호출하여 처리 결과 값을 받을 수 있다.

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve("처리 완료")
    }, 5000)
});

promise.then((data) => {
    console.log(`Result : ${data}`); // Result : 처리 완료
});

 

promise가 5초가 지나고 resolve를 호출하면서, fulfilled 상태가 되고 then() 메소드를 통해 resolve에서 넘겨준 '처리완료'를 받아 출력되는 것을 볼 수 있다.

 

 

Rejected 상태 : 거부

rejected 상태는 fulfilled 상태와는 달리 해당 비동기 작업이 정상적으로 처리되지 못했음을 나타내는 상태이다. 위의 예제 코드에서 resolve 대신 reject를 넣게 되면 다음과 같은 결과를 출력한다.

 

5초가 지나 reject를 통해 실패를 알리는 객체를 호출하였으므로 거부 상태로 변하게 되고, 이를 출력하니 rejected 상태가 출력되는 것을 볼 수 있다. 

 

위의 예제를 보면, 중간에 빨간 에러 메세지를 띄우는 것을 볼 수 있는데, 해당 에러의 이유는 reject에 대한 에러 처리가 없기 때문에 출력되는 메세지이다. rejected 상태에 대한 처리는 .catch() 메서드를 통해 할 수 있다.

 

fulfilled 상태와는 달리, rejected 상태는 비동기 작업이 정상적으로 처리되지 않았음을 뜻하는 것이기 때문에 catch 메서드를 통한 에러 처리(error handler)가 꼭 해주어야 에러 발생으로 인해 프로그램이 종료되는 일이 발생하지 않는다.

 

 

 

프로미스 핸들러

프로미스 핸들러는 프로미스의 상태에 따라 후속 작업을 진행할 수 있게 해주는 것이다. 위에서 언급했던 대로 성공에 대한 작업의 결과는 .then() 메소드로 넘어가고, 실패에 대한 결과는 .catch로 넘어가게 된다.

핸들러	설명
.then()	프로미스가 이행되었을 때, 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환
.catch()	프로미스가 거부되었을 때, 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환
.finally()	프로미스가 이행되거나 거부될 때 상관없이 실행할 콜백 함수를 등록하고, 새로운 프로미스를 반환

 

자바의 에러 핸들러인 try-catch-finally 구조와 매우 유사하기 때문에, 사용하는 법 또한 크게 어렵지 않을 것이다. 위의 표에서 주의 깊게 살펴보아야 할 점은, 각각의 핸들러가 새로운 프로미스를 반환한다는 사실이다.

 

이 사실은 다음 포스팅에서 다룰 프로미스 체이닝의 핵심 개념이기 때문에 꼭 기억하고 있어야 할 내용이다.

 

 

 

결론

프로미스는 pending, fulfilled, rejected의 3가지 상태를 가질 수 있으며, fulfilled, rejected의 상태에 대한 후속 작업으로 .then, .catch 핸들러를 사용할 수 있고, 상태에 상관없이 무조건 실행되는 .finally 핸들러도 존재한다.

 

각각의 핸들러는 등록된 콜백함수의 실행 결과를 가지는 새로운 프로미스 객체를 리턴하고 이는 프로미스 체이닝의 핵심 개념이 되는 부분이다.

 

 

 

 

reference : Inpa dev