[JS] Promise Chaining 과 Promisification

프라미스 체이닝과 프라미스화에 대해 다뤄보자.

1. Promise Chaining

Promise.then()함수가 Promise 객체를 반환하면 다시 .then 으로 동기화 할 수 있다.

여기서 중요한건 바로 .then을 이어가기 위해선 반드시 Promise 함수를 리턴해야한다는 것이다! 

//📁일반적인 Promise 
   new Promise((res,rej)=>{
        console.log("먼저실행됩니다.");
        res(처리내역);
    }).then((처리내역)=>{
        console.log("나중에실행됩니다.");
        //resolve()를 실행한 시점에 해당 함수가 실행되면서 동기화
    });

//📁프라미스체이닝
    new Promise((res,erj)=>{
        res(처리내역1);
    }).then((처리내역1)=>{
        return new Promise((res)=>{
            res(처리내역2);
        });
    }).then((처리내역2)=>{
        return new Promise((res)=>{
            res(처리내역3);
        });
    }).then((처리내역3)=>{
        console.log("처리내역4 끝");
    });

2) Promisification (프라미스화)

프라미스체이닝을 위해서 then함수에 프라미스 객체를 계속 생성하는 것이 너무 복잡하여 프라미스화 를 한다.

쉽게 말하면 promise를 함수처리 하여 사용한다는 이야기이다.

항상 잊지 말아야하는 것은 promise를 반환해야한다. 그래야 then을 쓸 수 있다.

<button id="testBtn">연속알람버튼</button>
<script>
    //프라미스화 : promise 값을 함수로 보냄. promise를 반환
    function setTimeAlretPromise(seconds=2){
        return new Promise((res,rej)=>{
            setTimeout(()=>{
                alert(seconds+" 초 뒤 알람!");
                res();//동기화하고싶은 시점에 써준다.
            },seconds*1000)
        });
    }

    //사용
    testBtn.onclick=function(e){
        setTimeAlretPromise(0)
            .then((resMsg)=>{
                return setTimeAlretPromise(1);
            }).then((resMsg)=>{
                return setTimeAlretPromise(2);
            }).then((resMsg)=>{
                return setTimeAlretPromise(3);
            });
    }
</script>