Promise 🤝

JavaScript에서 비동기 처리를 위해서 콜백 함수를 이용합니다.
하지만 코드가 복잡해짐에 따라 콜백 중첩이 많아지고

그 결과, 코드의 복잡성을 높이는 콜백 지옥 😈을 만나게 됩니다.

a(function (resultA){
    b(resultA,function (resultB){
        c(resultB,function(resultC){
            d(resultC,function(resultD){
                e(resultD,function(resultE){
                    f(resultE,function(resultF){
                        console.log(resultF);
                    })
                })
            })
        })
    })
});

Promise 기초

이런 상황을 극복하기 위해 Promise 라는 패턴이 등장했습니다.
JavaScript에서 Promise는 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체입니다.

단어의 뜻 그대로 사용자에게
"메소드 결과가 나올때까지 기다릴게, 약속할게"
라는 뜻으로 Promise가 아닌가라는 생각이 듭니다..? 🤷‍♂️

그리고 비동기 처리의 결과를 객체화 시킨다는 점이 Promise의 특징으로 볼 수 있습니다.

Promise 예제

var ranTime = function (){
    return new Promise(
      // 실행 함수 (Executor)
      function(resolve, reject){
        setTimeout(() => {
            var ran = Math.random() * 10;
            if(ran >= 5){
                resolve(ran);
            }else{
                reject("실패!");
            }
        }, 1000);
    })
}

ranTime()
.then(function(num){
	// 성공시
    console.log(num);
},function(text){
	// 실패시
    console.log(text);
});

위 Promise 선언부에서 Promise 객체를 리턴하도록 함수로 감싸고 있습니다.
Promise 객체는 인자로 실행 함수(Executor)를 받습니다.

실행 함수(Executor)는 비동기 작업이

• 성공 > resolve 함수를 호출합니다.
• 오류 발생 > reject 함수를 호출합니다.

결국 Promise 객체는 비동기 처리가 성공 or 실패하였는지 상태 정보를 갖습니다.

콘솔 창에 위 코드를 실행시키면
setTimeout 함수로 인해 pending이 1초 동안 유지 후
위 결과 값이 호출됩니다.

Promise 상태

then 메소드

ranTime()
.then(function(num){
	//성공시
    console.log(num);
},function(text){
	//실패시
    console.log(text);
});

사용자는 then 메소드를 이용하여 Promise 객체의 정상적인 비동기 작업이 이루어 졌는지 확인 할 수 있습니다.
then 메소드의 첫번째 파라미터에는 성공시 호출할 콜백 함수를,
두번째 파라미터에는 실패시 호출할 콜백함수를 선언하면 Promise의 상태에 따라 수행하게 됩니다.

Promise Chaining

매개변수로 받은 콜백 함수의 리턴 값을 이어 받는 then 메소드를 이용하여
chaining이 가능합니다.

Promise.then(function(a){

}).then(function(b){

}).then(function(c){

}).then(function(d){

}).then(function(e){

}).then(function(f){
    console.log();
})

위와 같이 콜백 지옥보다 훨씬 코드의 가독성이 높아지는 것을 볼 수 있습니다.

최근 들어서는 콜백 함수와 Promise의 단점을 보완한
async & await 비동기식 처리 패턴이 등장했습니다.