자바스크립트 Promise란

Promise란?

비동기 작업의 최종 성곡 혹은 최종 실패를 나타내는 객체

왜 사용하는가? 비동기 메소드를 동기 메소드처럼 처리할 수 있기 때문

 

예를 들어 피자를 만드는 프로그램을 개발한다고 가정해보자.

/**
 * 피자만들기 시작!
 * 3초 후에 피자 도우를 깔고,
 * 3초 후에 소스를 바르고,
 * 4초 후에 토핑을 올리고,
 * 2초 후에 치즈를 올리고,
 * 4초 후에 오븐에 넣고
 * 1분 후에 꺼낸다.
 */

 

이런 프로그램을 만드는데에는 두 가지 방법이 있을 것이다.

1. 콜백을 사용

2. 프로미스를 사용

 

콜백을 사용했을 때

setTimeout(() =>{
    console.log("도우를 깔았습니다.")
    setTimeout(() => {
        console.log("소스를 발랐습니다.")
        setTimeout(() => {
            console.log("토핑을 올렸습니다.")
            setTimeout(() => {
                console.log("치즈를 올렸습니다.")
                setTimeout(() => {
                    console.log("오븐에 넣었습니다.")
                    setTimeout(() => {
                        console.log("오븐에서 꺼냈습니다.")
                    }, 60000)
                }, 4000)
            }, 2000)
        }, 4000)
    }, 3000)
}, 3000)

 

Promise를 사용했을 때

const pizzaPromise = new Promise((resolve) => {
  setTimeout(() => {
    console.log("도우를 깔았습니다.");
    resolve();
  }, 3000);
});

const waitAndDo = (message, sec) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(message)
            resolve()
        }, sec * 1000)
    })
}

pizzaPromise
  .then(() => waitAndDo("소스를 발랐습니다.", 3))
  .then(() => waitAndDo("토핑을 올렸습니다.", 4))
  .then(() => waitAndDo("치즈를 올렸습니다.", 2))
  .then(() => waitAndDo("오븐에 넣었습니다.", 1))
  .then(() => waitAndDo("오븐에서 꺼냈습니다.", 60))

 

가독성이 훨씬 좋아지는 걸 알 수 있다.

 

promise 말고 async와 await를 사용할 수도 있다.

 

resolve(), reject(), catch()

const loginPromise =  (id, pw) => new Promise((resolve, reject) => {
    if(id === "study" && pw === "1234"){
        console.log("로그인 성공!")
        resolve(id)
    }else{
        reject()
    }
})
loginPromise("study", "1234")
    .then(name => console.log(`환영합니다 ${name}님!`))
    .catch(() => console.log("로그인 실패"))

 

reject는 throw하는 것 처럼 이 프로미스가 실패라는 것을 말한다. 직접 실패로 만드는 것.

resolve는 성공!을 나타내는 것.

 

then은 프로미스가 성공일 때 실행된다.

catch는 프로미스가 실패일 때 실행되는 구문이다.