[ES5]여러개의 promise를 Synchronous하게 받는 promise 구현하기

promise문법은 기본적으로 비동기로 구현되고 실행된다.

여러개의 promise가 끝나는 것을 확인하여 synchronise하게 처리하고 싶다면 어떻게 해야할까?

 

  1) promise를 중첩되게 구현한다. -> Callback Hell

  2) 여러 promise를 동시에 진행하고 완료됨을 확인하는 promise로 감싼다. -> 선택!

 

2번구현이 동작하는 방식은 아래와 같은 도식으로 표현할 수 있다.

Multiple promise

최종 구현 code는 아래와 같다.

var items = new Map;
var showProgressCircle = true;	// job을 가져오고 있을 때는 progress circle이 보이도록 
function getJobInformation(host, resolve) {
  $axios.get(host+'/api/jobs') 	// axios를 사용하여 여러개의 다른 host를 돌아가면서 job을 가져온다.
    .then((response) => {
      items.set(host, response.data);
      resolve();
    })
    .catch((ex) => {
      items.set(host, null);
      console.log('fetch failed', ex);
      resolve();
    })
}

let requests = HOSTS.map((item) => { 	// map자료형에 여러 host ip들이 들어있다.
  return new Promise((resolve) => {
    getJobInformation(item, resolve);
  });
});

Promise.all(requests).then(() => {
  howProgressCircle = false;	// job을 모두 가져왔을때 progress cicrcle false
})

상기 코드에 있어 요구조건은 아래와 같다.

# 여러개의 서버가 존재
# 여러개 서버에서는 동일 api(/api/jobs)를 get방식으로 호출
# 여러 서버에서 통합적으로 정보를 가져와서 map 자료형으로 넣고 싶음