[RxJS] Promise.all 대신 mergeMap 써보기

개요

• 여러 async 함수를 동시에 수행해서 결과를 만들고 싶을 때, Promise.all()을 사용한다.
• 이 때 Promise.all에서 많은 함수가 동시에 call이 되는 것을 막고 싶을 때가 있다.
• 이를 편리하게 구현할 수 있게 RxJS에서는 mergeMap을 제공한다.

예제

1. 준비코드

• 아래와 같이 일정 시간 delay후 종료되는 task함수를 만들자.

const sleep = async function (ms: number): Promise<void> {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

const task = async function (id: string): Promise<string> {
  console.log(id, new Date());
  await sleep(4000);
  return id;
}

2. 예제 코드

from([
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
])
  .pipe(
  mergeMap(id => task(id), 2), // mergeMap을 통해서 task를 수행하고, Promise의 결과를 반환한다. 그리고 2는 동시에 수행하는 task의 갯수이다.
  reduce<string, string[]>((acc, cur) => [...acc, cur], []),
)
 .subscribe({
  next: (taskIds: string[]) => console.log('result', taskIds),
  error: console.error,
  complete: () => console.log('done'),
});