프로미스 패턴

dev_jo·2023년 2월 3일

자바스크립트 프로미스

자바스크립트

목록 보기

3/4

자바스크립트 비동기 호출을 하는 소스를 작성할 때 가독성 높은 코드로 작성할 수 있다.

프로미스(Promise)

자바스크립트에서 비동기 처리를 하는 코드를 작성할 때 사용하게 되는 객체이다.
비동기로 동작하지만 순차적으로 처리해야하는 경우 프로미스 패턴을 이용해 간결한 코드를 작성할 수 있다.

~~콜백지옥 예시~~

function a () {
	function b () {
    	function c () {
        	function d () {
              //...
            }
        }
    }
}

콜백 지옥이라는 말이 있다. 위 코드는 a, b, c, d.. 함수가 비동기로 동작한다는 가정하에 작성해보았다. 소스를 보는 사람도 소스를 수정해야 하는 사람도 가독성이 떨어지는 코드를 보며 어려움을 겪을 것 이다. 또한 만약 처리 도중 특정 메소드에서 오류가 발생하는 경우, 그 원인을 찾기가 어렵다.

이때 프로미스가 필요하다.

Promise의 3가지 상태

프로미스의 상태란 프로세스 처리과정을 의미한다.
프로미스 객체를 생성하고 종료될 때 까지 3가지 상태를 갖게 되는데 대기, 이행, 실패 단계가 존재한다.

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

대기 상태

new Promise() 메소드를 통해 호출하는 순간 Pending(대기) 상태가 된다.
비동기 처리가 끝날 때 까지 Pending(대기) 상태가 유지된다.

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

이행 상태

비동기 처리가 다 끝난 후 resolve 함수가 콜백된다.
이때를 이행 상태라 하는데, 이 시점에서 .then() 메소드를 통해 결과 값을 받을 수 있다.

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

실패 상태

비동기 처리가 실패한 경우 reject 함수가 콜백된다.
이때를 실패 상태라 하고, 이 시점에서 .catch() 메소드를 통해 실패한 이유를 알 수 있다.

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

프로미스 사용 방법

프로미스는 말 그대로 약속이다. 비동기 처리에 대한 약속된 결과를 반환한다. 이때 약속값을 통해 개발자는 해당 함수의 종료시점을 알 수 있으며, 종료시점 이후 로직을 작성할 수 있다.

1. 프로미스 객체 생성 및 리턴

function promiseTest () {
 	return new Promise(function(resolve, reject) {
      	if (resolve) {
        	resolve({test : 'success'});
        }
      	else if (reject) {
          	reject(new Error("error occured!!"));
        } 
	});
}

비동기 호출이 성공과 실패의 경우에 대해서 각각 resolve, reject에 할당한다.

2. 프로미스 체이닝

function callPromiseTest () {
 	promiseTest().then(response => {
      	console.log(response.test); // success
    }).catch(error => {
      	console.log(error); //error occured!!
    });
}