자바스크립트 Promise

개요

비동기 처리 : 작업 순서가 보장이 되지 않는 단점이 존재하다, 순서가 필요한 작업들이 있을 수 있다. 이를 보완하기 위해 나온 것이 Promise

Promise

비동기 작업을 좀 더 편하게 할 수 있도록 ES6에서 도입, 콜백 방식의 콜백지옥을 보완

• pending 상태 : 대기 상태, resolve나 reject가 실행되기 전의 상태
• fulfilled 상태 : 이행 상태, resolve 호출 시 의 상태
• rejected 상태 : 실패 상태, reject 호출 시의 상태

promise를 호출하면 일단 pending 상태가 된다.

호출 성공 시 fulfilled 상태로 처리 되고, 호출 실패 시 reject 상태로 처리 된다.

Promise Chaining

Promise.then을 호출하면 자동적으로 Promise가 return 된다, Return을 통해 값을 넘겨받을수 있다.

 

예제

1. setTimeout을 Promise로 만들기

function promiseSetTimeout(ms) {
    return new Promise((res, rej) => {
        return setTimeout(() => {
            res('promise test');
        }, ms)
    })
}
promiseSetTimeout(1000).then(li => console.log(li));

 

2. 1번 예제에 Promise Chaining 해보기

function promiseSetTimeout(ms) {
    return new Promise((res, rej) => {
        return setTimeout(() => {
            res('promise test');
        }, ms)
    })
}
promiseSetTimeout(1000).then(li => {
    console.log(li);
    return li + 1;
}).then(si => {
    console.log(si);
    return si + 1;
})

 

3. 비동기로 동기 동작 구현

시작과 동시에 log 1 출력 > 0.5초 후 log 2 출력 > 1초 후 log 3 출력 > 2초 후 log 4 출력하기.

 

하드코딩

console.log("HI");
setTimeout(() => {
    console.log("First");
    setTimeout(() => {
        console.log("Second");
        setTimeout(() => {
            console.log("Third");
        }, 2000);
    }, 1000);
}, 500);

 

promise 함수화

console.log("HI");
function delay(ms) {
    return new Promise((resolve, reject) => {
        return setTimeout(() => {
            resolve(1);
        }, ms);
    })
}
delay(500).then(result => {
    console.log("First");
    return delay(1000)
})
.then(result => {
    console.log("Second");
    return delay(2000)
})
.then(result => {
    console.log("Third");
})

 

최초 delay(500) 함수를 실행하면, pending 상태로 존재하게 되며 resolve는 1이므로 항상 resolve 처리가 되어 fulfilled 상태가 된다.  따라서 then이 작동을 하며 First를 콘솔 로그로 출력 후 delay(1000)을 리턴한다.

이후는 마찬가지로 더 이상 delay 함수가 return 되지 않을 때 까지 pending -> resolve -> fulfilled 순환이 진행된다.