[Javascript] Promise chaining 에 대하여

 

자바스크립트에서 순차적으로 수행되어야하는 비동기 작업은 promise chaining으로 해결할 수 있다.

 

아래는 promise chaining의 예시이다.

new Promise((resolve, reject)=>{
   setTimeout(()=>resolve(1), 1000); 
}).then((result)=>{
   alert(result); //1
   return result * 2;
}).then(()=>{
   alert(result); //2
   return result * 2;
}).then(()=>{
   alert(result); //4
   return result * 2;
});

• promise chaining은 result가 then 핸들러의 체인을 통해 전달된다는 점에서 착안.
• then 핸들러의 return값이 다음 then 핸들러의 result로 전해지는 방식으로 생각하면 되겠다.

 

작동순서

1. 1초 후 executor내에 resolve가 실행 (파라미터 : 1)
2. 첫 번째 핸들러가 호출! 이때 result는 앞선 resolve에서 넘겨주었던 1값이 넘어감. 마지막에 결과값을 return.
3. 첫 번째 핸들러가 return된 후, 두 번째 핸들러가 실행. 이때 result는 앞서 return되었던 2가 된다.
4. 앞선 과정 반복..

결과적으로 alert는 1,2,4 순서로 뜨게 된다.

 

Promise chaining이 가능한 이유는 promise.then을 호출하면 promise값이 반환되기 때문이다.

따라서 반환된 promise는 당연히 then호출이 가능한 것.

 

아래는 promise chaining이 아닌 예시이다.

let promise = new Promise((resolve, reject)=>{
   setTimeout(()=>resolve(1), 1000);
});

promise.then((result)=>{
   alert(result);//1
   return result * 2;
});

promise.then((result)=>{
   alert(result);//1
   return result * 2;
});

promise.then((result)=>{
   alert(result);//1
   return result * 2;
});

• 위 예시는 한개의 promise에 여러 핸들러가 등록된 케이스라고 볼 수 있다.
• 따라서 위의 chaining과 다르게 result를 순차적으로 전달하지 않고 독립적으로 처리.

 

• 마치 이벤트를 pub하면 여러 subscribe하는 핸들러가 실행되는 방식과 유사해보인다.

 

프라미스 반환하기

.then(handler)의 핸들러에서 명시적으로 Promise를 반환하게 할 수도 있습니다.

new Promise((resolve, reject) => {
   setTimeout(()=>resolve(1),1000);
   
}).then((result)=>{
   
   alert(result); // 1
   
   return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve(result * 2), 1000);
   });
   
}).then((result)=>{

   alert(result); // 2
   
   return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve(result * 2), 1000);
   
   });

}).then((result)=>{
   alert(result); //4
});

• 명시적으로 Promise를 return한다면 내부적으로 굳이 Promise로 한번 더 return 되는 Promise를 감싸주지 않음.
• 즉 Promise가 리턴되지 않을 경우만 내부적으로 Promise로 리턴해줌.
• 위 케이스는 1초 간격으로 순차적으로 alert창이 뜨게 된다.

[참고]https://ko.javascript.info/promise-chaining