[Javascript] Promise - then 체이닝시 유의사항

자바스크립트에서 Promise 사용시

then()을 통하여 resolve 데이터를 전달받는다.

 

여러개의 Promise 체이닝시,

then을 여러번 호출하여,

resolve -> promise -> resolve 를 

반복하는 경우가 자주 등장하는데,

Producer측과 Client 측 코드를 나누어

아래 예제를 작성해보았다.

 

[Javascript : Producer Code]

//Promise 체이닝
function Promise1(){
    return new Promise((resolve,reject)=>{
        resolve('Hello');
    });
}

function Promise2(str){
    return new Promise((resolve,reject)=>{
        if(!str) reject(new Error('Error! : Promise2'));
        resolve(str + ' World');
    });
}

function Promise3(str){
    return new Promise((resolve,reject)=>{
        if(!str) reject(new Error('Error! : Promise3'));
        resolve(str+'!!!!')
    });
}

 

[Javascript : Client Code]

const result = Promise1()
//return 값과 해당 함수 파라미터가 같은 경우 생략가능
.then(Promise2).catch(console.log)
.then(Promise3).catch(console.log)
.then(console.log);

 

Promise1() -> Promise2() -> Promise3() 순에서

중간에 추가적으로 데이터를 가공할 일이 생겨서,

Promise2와 Promise3 사이에 if를 통한 분기를 해야하는

상황이 온다면 하단과 같이 처리를 하면 해결된다. 

(물론 예외 처리하는 멋진 방법이 있지만, 예제를 위해 극한 상황을 만들어보았다)

 

[Javascript : 데이터 가공이 추가된 Client Code]

const result = Promise1()
//return 값과 해당 함수 파라미터가 같은 경우 생략가능
.then(Promise2).catch(console.log)
//추가된 분기문
.then((val)=>{
    if(val !== 'Hello World')
        val = 'Hello World';
    return Promise3(val);
})
.then(Promise3).catch(console.log)
.then(console.log);

 

추가된 then 내의 함수를 보면 

마지막에 return Promise3 함수가 눈에 보일 것이다.

여기서 자주 실수하는게, 

return Promise3 함수를 하여야 하는데,

Promise3()함수 호출만 하여 

체이닝된 다음 프로미스 작업을

생략하고 종료하게 된다.