[JavaScript] Promise

JavaScript로 비동기 프로그래밍을 할 때 JavaScript가 함수형 언어이기 때문에 발생하는 현상인 콜백 지옥이란 게 있다..

 

work1 함수 끝나고 work2 함수가 불렸으면 좋겠고 work2 함수가 끝나고 나면 work3을 불렀으면 좋겠고..

이런 요구사항이 발생할때

function work1(onDone) {
    setTimeout(() => onDone("work 1 done"), 100);
}
function work2(onDone) {
    setTimeout(() => onDone("work 2 done"), 200);
}
function work3(onDone) {
    setTimeout(() => onDone("work 3 done"), 300);
}

work1(function (msg1) {
    console.log("done after 100ms:" + msg1);
    work2(function (msg2) {
        console.log("done after 300ms:" + msg2);
        work3(function (msg3) {
            console.log("done after 600ms:" + msg3);
        });
    });
});

위와 같은 형태의 코드를 사용하게 된다. 이 경우 함수가 3개만 사용되어서 그렇지 함수가 10개, 20개씩 늘어나게 되면 10개, 20개 의 계단 형태 코드가 생성될 건데 만들 때야 그 코드를 보고 어떻게든 이해하겠지만.. 나중에 보면 눅 ㅏ이해할 수 있을까..

 

그런데 ES6에서 이런 문제를 해결할 수 있는 함수 표현법인 Promise 패턴이 생겼다.

주로 JavaScript에서 비동기 처리에 사용되는 객체인데 보통 서버에서 받아오는 데이터를 표시하는 경우에 종종 사용함

 

Promise 객체는 생성되고 종료될 때까지 총 3가지 종류의 상태를 가진다.

• Pending(대기) : 비동기 처리 로직이 아직 이행되지 않은 경우
• Fulfilled(이행) : 비동기 처리기 정상적으로 완료된 경우
• Rejected(실패) : 비동기 처리가 실패되거나 오류 발생한 경우

Pending 

: 보통 아래처럼 promise 객체를 생성한 경우 pending 상태가 됨

new Promise();
new Promise(resolve => {
	//
});
new Promise((resolve, reject) => {
	//
});

Fulfilled

: 원하는 조건이 다 수행되고 Promise 객체 안에서 resolve가 호출되는 경우

new Promise((resolve, reject) => {
	resolve();
});

Rejected

: 원하는 조건이 다 수행되고 Promise 객체 안에서 reject가 호출되는 경우

new Promise((resolve, reject) => {
	reject();
});

 

MDN에 나온 Promise 흐름도(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)

=> 사실 결국 동작 수행 이후 resolve를 호출하냐 reject를 호출 하나의 차이인 거 같다

 

위의 예시를 Promise를 이용해서 구현하게 되면 아래와 같은 방식으로 구현이 된다.

const work1 = () => 
    new Promise(resolve => {
        setTimeout(() => resolve('work1 done'), 100);
    });

const work2 = () => 
    new Promise(resolve => {
        setTimeout(() => resolve('work2 done'), 200);
    });

const work3 = () => 
    new Promise(resolve => {
        setTimeout(() => resolve('work3 done'), 300);
    });

work1().then(msg1 => {
    console.log("done after 100ms:" + msg1);
    return work2();
}).then(msg2 => {
    console.log("done after 300ms:" + msg2);
    return work3();
}).then(msg3 => {
    console.log("done after 600ms:" + msg3);
});

Promise를 이용하니깐 이용하지 않았을 때보다 더 코드가 예뻐진 거 같다..

이해하는데 좀 걸리긴 했지만 그래도 무작정 계단식 코드가 막 나오는 거보다는 훨씬 나은 거 같다.