Promise.All 사용

Promise.All이란?

주어진 여러개의 Promise들을 비동기적, 병렬적으로 실행하는 함수이다.

주로 언제 사용할까?

async await은 동기적으로 코드가 실행된다.
주로 순서가 상관없는 경우 promise.all을 사용하면 응답 속도 개선에 있어 크게 효과를 볼 수 있다.

async await과의 차이점

async await은 직렬적 요청을 보내 Promise가 동기적으로 반환 된다.
요청한 순서는 지키켜 반환되지만, 동기적으로 진행되기 때문에 Promise.All보다 많은 시간이 소요된다.
반면 Promise.All 함수는 병렬적 요청을 보내 Promise를 비동기적으로 반환 한다. 성능이 개선되는 대신 index가 엉킬 수 있으니 유의해야 한다.

사용 예시

const matchDetail = result.map((gameId: string) =>
  fetch(`${URL_ASIA_RIOT}/lol/match/v5/matches/${gameId}?   ${KEY}`).then((res) => res.json()));

const matchData = await 	   		              Promise.all(matchDetail).then((data) => data);

실제 개인 프로젝트에서 사용했던 코드다. Riot API를 활용하여 게임 전적을 얻는 코드인데 map함수로 promise 배열들을 반환하고, 반환된 promise 배열을 Promise.all을 통해 결과값을 반환 받는다.

성능 향상

Promise.All을 몰랐을 땐 Promise배열들을 반복문을 통해 axios를 활용하여 결과값을 얻었었는데 15게임 기준 5s에서 1.5s 정도로 성능이 3배이상 좋아진것을 알 수 있었다.