Promise 사용하기 (프로미스가 뭘까?)

0. 개요

 먼저 자바스크립트는 기본적으로 동기적으로 운영된다는 것을 알아야한다. 그러나 그런 자바스크립트에게 비동기적으로 처리할 수 있는 방식들이 세가지가 있었는데, 그 중 하나는 Callback 함수를 이용하는 것이었다. 그러나 콜백함수를 이용하게 되면 일명 "콜백 지옥"에 빠질 수 있는 위험성이 있다. 그래서 콜백 함수 대신에 비동기적으로 자바스크립트를 처리하기 위한 방법 중 하나가 바로 프로미스이다.

>> 이전 포스팅을 먼저 본다면 이해에 도움이 된다. 자바스크립트에서 비동기 처리란? https://jinn-o.tistory.com/24 비동기적 Callback 함수 이용하기 https://jinn-o.tistory.com/25

 

 

 

1. 그래서 프로미스가 뭔데?

프로미스, 즉 Promise 한국어로 약속이라는 의미이다. 상당히 미래지향적 단어임을 눈치챘다면, 맞다. 프로미스는 비동기 작업이 미래에 성공할 것인지, 실패할 것인지의 결과 값을 나타낸다.

 

 

 

2. 프로미스의 4가지 상태값

Pending : 아직 결과 값이 반환되지 않은 대기 중인 상태

Fulfilled : 성공

Rejected : 실패

Settled : 결과 값이 성공 혹은 실패로 반환된 상태

 

 

 

3. 프로미스 생성자 예제

먼저 resolve 의 경우 (성공하는 경우)의 코드를 살펴보자.

const promise = new Promise((resolve, reject) => {
	console.log('doing something ... ');
    setTimeout(() => {
    	resolve('success!');
    }, 2000);
});

new 를 통해 생성자를 생성하고, 작업을 수행한 뒤에 만약에 작업 수행이 성공하면 2초뒤에 success!를 반환하는 코드를 작성하여 보았다.

 

 

다음으로 reject 의 경우 (실패하는 경우)의 코드를 살펴보자.

const promise = new Promise((resolve, reject) => {
	console.log('doing something ... ');
    setTimeout(() => {
    	reject(new Error('no network'));
    }, 2000);
});

 

 

 

 

4. 프로미스 사용자 예제

프로미스를 호출할 때는 then 과 catch 그리고 finally 메소드가 있다.

먼저, then 같은 경우에 사용법은 다음과 같다.

promise.then(value => {
	console.log(value);
});

여기서 then 이란 resolve, 즉 성공했을 때의 인자를 받아온다.

따라서 콘솔에 찍히는 결과값은 다음과 같다.

// resolve => then 결과값
success !

 

 

다음으로 실패했을 경우인 catch 같은 경우에 사용법은 다음과 같다.

성공할 경우에다가 catch 를 붙이면 실패할 경우에는 어떻게 대처하는 지에 대한 메뉴얼이 된다.

promise
    .then(value => {
    	console.log(value);
    })
    .catch(error => {
    	console.log(error);
    });

콘솔에 찍히는 결과값은 다음과 같다.

// reject => catch 결과값
Error: no network

 

 

 

마지막으로 finally 는? 바로 성공하든 실패하든 마지막에 실행되는 메소드이다.

 

promise
    .then(value => {
    	console.log(value);
    })
    .catch(error => {
    	console.log(error);
    })
    .finally(() => {
    	console.log('finally');
    });​

성공했을 때의 결과값

success !
finally

실패했을 때의 결과값

Error: no network
finally