Promise 병렬로 처리하기

병렬 처리

Promise를 병렬로 처리하는 법을 알아보자. Promise.all 을 사용하면 2개 이상의 Promise를 병렬로 처리할 수 있다.

아래는 Promise를 반환하는 함수 4개이다. 마지막 함수만 reject를 반환한다.

const f1 = () => {
  return new Promise((res, _) => {
    setTimeout(() => {
      res('1번 완료');
    }, 1000);
  });
};

const f2 = () => {
  return new Promise((res, _) => {
    setTimeout(() => {
      res('2번 완료');
    }, 2000);
  });
};

const f3 = () => {
  return new Promise((res, _) => {
    setTimeout(() => {
      res('3번 완료');
    }, 3000);
  });
};

const f4 = () => {
  return new Promise((_, rej) => {
    setTimeout(() => {
      rej(new Error('4번 실패'));
    }, 0);
  });
};

 

 

이제 Promise.all을 사용하면!

Promise.all([f1(), f2(), f3()])
  .then((res) => {
    console.log(res);
  })

 

 

위 코드의 결과는 다음과 같다.

1번 완료
2번 완료
3번 완료

 

 

reject를 반환하던 f4() 를 사용하면 어떻게 될까?

Promise.all([f1(), f2(),f3() ,f4()])
  .then((res) => {
    console.log(res);
  })
  .catch(() => {
    console.log('프로미스 all은 실패가 하나라도 있으면 에러');
  });

 

 

결과는??

프로미스 all은 실패가 하나라도 있으면 에러

 

그렇다 Promise.all은 하나라도 rejected 되면 catch문으로 간다.

 

 

모든 결과를 보고 결정하고 싶다면 Promise.allSettled를 사용할 수 있다.

const getData = async () => {
  const results = await Promise.allSettled([f1(), f2(), f4()]);

  results.forEach((result) => {
    if (result.status === 'rejected') {
      console.log(result.reason);
    }

    if (result.status === 'fulfilled') {
      console.log(result.value);
    }
  });
};

fulfilled된 경우의 값만 console에 보여주는 함수이다.

 

 

순차적 처리

Promise간에 선후행 관계가 있을 경우에는 순차적으로 처리해야한다.

평범하게 then, catch, finally를 사용하면 된다.

f1()
  .then((result) => f2(result))
  .then((result) => f3(result))
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

 

 

그치만 조금더 멋지게 해보자.

[f1, f2, f3]
  .reduce((acc, cur) => {
    return acc
      .then((res) => {
        console.log(res);
        cur();
      })
      .catch((error) => {
        throw error;
      });
  }, Promise.resolve())
  .then(() => {
    console.log('작업 완료');
  })
  .catch((error) => {
    console.error(error);
  });

 

 

reduce를 사용했다. 더욱 멋지게 해보자.

.reduce(async (acc, cur) => {
    return acc.then(async (res) => {
      try {
        console.log(res);
        const result = await cur();
        return result;
      } catch (error) {
        throw error;
      }
    });
  }, Promise.resolve('작업 시작'))
  .then((res) => console.log(res))
  .catch((error) => console.error(error))
  .finally(() => console.log('작업 완료'));

async, await도 사용했다.

 

 

의문점

근데 JavaScript는 싱글 스레드인데 병렬처리가 가능한가? 라는 의문이 생겼다.근데 의문이 생김과 동시에 풀렸다. Web APIs, 이벤트 루프, 테스크 큐를 사용하여 비동기 처리를 하듯이 하겠구나 하고 생각이 들었다. 그래서 Promise.all을 구현해보았다. 

 

const all = (promiseArray = []) => {
  return new Promise(async (resolve, reject) => {
    try {
      const returnArray = [];
      let count = promiseArray.length;

      for (const [index, promise] of promiseArray.entries()) {
        const result = await promise;
        returnArray[index] = result;
        count -= 1;

        !count && resolve(returnArray);
      }
    } catch (error) {
      reject(error);
    }
  });
};

(아마 이렇지 않을까..)

 

결국 비동기 처리니까 병렬처럼 처리가 가능한 것이다.