Promise.all 구현하기

medium.com/@muralikv/implementing-promise-all-in-javascript-732076497946

Implementing Promise.all in javascript

이 글을 참고하였습니다.

 

Promise.all이란 배열로 받은 promise를 전부 실행하고 결과를 한번에 리턴하는 함수입니다. 그리고 하나가 실패하면 뒤에 남은 promise들이 성공하든 실패하든 일단 reject시켜버립니다. 즉 첫번재 터지는 오류만 내보낸다는 뜻입니다.

 

주어진 시간 이후 실행되는 asyncOperation 함수가 있습니다.

var asyncOperation = function(time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve(time);
    }, time);
  });
}

 

Promise.all을 써봅시다

var promisesToMake = [asyncOperation(2000), asyncOperation(1000), asyncOperation(3000)];
var promises = Promise.all(promisesToMake);
promises.then(function(results) {
 console.log(results);
});

결과는 [2000, 1000, 3000] 이렇게 나옵니다.

 

promise.all로 리턴된 값은 주어진 배열의 순서를 보장합니다.

 

 

Promise.all을 구현해봅시다

var promiseAll = function(promises) {
  var results = [];
  var completedPromises = 0;
  return new Promise(function (resolve, reject) {
    promises.forEach(function(promise, index) {
      promise.then(function (value) {
        results[index] = value;
        completedPromises += 1;
        if(completedPromises === promises.length) {
          resolve(results);
        }
      }).catch(function (error) {
        reject(error);
      });
    });
  });
}

promises 배열을 forEach로 반복하면서 해당 index에 값을 명시적으로 꽂아줍니다.

그래서 순서가 보장될 수 있었군여

catch도 받자마자 뿜어버리네요,

 

var promisesToMake = [asyncOperation(2000), asyncOperation(1000), asyncOperation(3000)];
var promises = promiseAll(promisesToMake);
promises.then(function(results) {
 console.log(results); // [2000, 1000, 3000]
});

잘 실행되는 걸 볼 수 있습니다.

 

promise.all이 처음 접할때는 조금 난해(?)한데 구현은 의외로 간단하네요~!!!!!!