Promise

📌 Promise

💡프로미스는 요청을 하고 일단 다른 작업을 하며 완료되면 알려달라고 하는것과 같다.
Ex).
1. 소비자가 가게에 상품 구매를 요청
2. 준비되면 연락달라고 하고 다른 일을 처리
3. 판매자가 상품이 준비되어 연락 함

• 프로미스는 new Promise 키워드로 생성한다.
• 함수 2개를 전달 받는데 resolve, reject 이다.
• resolve는 성공한 경우, reject는 실패한 경우 실행되는 함수이다.
• 어떤일이 완료되고 난 뒤에 실행되는 함수를 콜백 함수라고 한다.
• new Promise 생성자가 반환하는 promise 객체는 state와 result를 프로퍼티로 갖는다.

// promise 객체
{
    state: ‘pending’,  // 대기
    result: undefined
}

• state는 최초에 pending(대기)이었다가 resolve가 호출되면(성공하면), fulfilled(이행됨)가 된다.

// resolve 호출 후
{
    state: ‘fulfilled’,  // 이행됨
    result: value
}

• 이때 result는 resolve 함수로 전달된 값
• 만약 reject가 호출되면(실패하면) state는 rejected(거부됨)이 된다.
• 이때 result는 reject 함수로 전달된 error이다.

const pr = new Promise ((res, rej) => {
    setTimeout(() => {
        resolve(“OK”);
    }, 3000);
});

• 프로미스가 반환하는 promise 객체의 state 프로퍼티는 3초 이전엔 pending(대기) 였다가 3초 이후에는 fulfilled(이행됨)이 되면서 result는 undefined 였다가 resolve의 값인 “OK”가 된다.

const pr = new Promise ((res, rej) => {
    setTimeout(() => {
        rej(new Error(“…error”));
    }, 3000);
});

🔔 위 코드는 판매자 코드의 예시이고, 소비자 입장의 코드를 살펴보자

const pr = new Promise((res, rej) => {
    setTimeout(() => {
         res(“OK”);
    }, 3000);
});

pr.then(
    function(result){
       console.log(result + “가지러 가자…”)
    },     // 이행되었을때 실행
    function(err){
       console.log(“다시 실행해주세요…”)
    }      // 거부되었을때 실행
);

• then을 사용하여 콜백함수를 실행할 수 있다.
• then은 프로미스가 반환하는 result를 인자로 받아 사용 가능하다.
• then이외 사용 가능한 것이 catch와 finally
• catch는 error가 발생한 경우, 즉 reject인 경우에만 실행

// 위 예시코드는 다음과 같이 바꿀 수 있다.
const pr = new Promise((res, rej) => {
    setTimeout(() => {
        res(“OK”);
    }, 3000);
});

pr.then(
    function(result) {
        console.log(result + “가지러 가자…”)
    }
).catch(
    function(err) {
        console.err(err + “: 다시 실행해 주세요…”);
    }
)

• 위 위 코드 예시에서 then에서 두 번째로 전달했던 함수를 catch 안으로 넣어준다.
• 가독성 측면에서도 좋고 첫 번째 함수에서의 에러도 잡아주기 때문에 catch문을 사용하는 것을 권장.
• finally는 이행이든 거부든 처리가 완료되면 항상 실행됨.
• 로딩 화면을 없을때 유용하게 사용한다.

pr.then(
    function(result) {
        console.log(result + “주문이 완료되었습니다…”)
    }
).catch(
   function(err) {
        console.err(err + “다시 실행해 주세요….”)
   }
).finally(
   function() {
        console.log(“주문 끝”)
   }
)