<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2024-09-22 </p>  <div><p>동시에 여러개의 비동기 처리를 할 때 <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/all"><code>Promise.all</code></a>을 사용해서 처리 속도를 올리곤 한다.</p>
<pre><code>const results = await Promise.all([fetchData1(), fetchData2()]);</code></pre>
<p>이렇게 하면 데이터 패칭을 동시에 요청하고 병렬로 둘 다 끝난 후에 <code>results</code>에 <code>[data1, data2]</code>와 같이 데이터가 들어간다.</p>
<p>반면에 <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/race"><code>Promise.race</code></a>를 사용하면 모든 처리가 끝날 때 까지 기다리지 않고 먼저 끝나는 것이 반환되어서 일종의 타임아웃을 걸 수 있다.</p>
<pre><code></code>await Promise.race([
  page.waitForNetworkIdle(),
  new Promise(resolve =&gt; setTimeout(resolve, 5000)),
]);</pre>
<p>이렇게 하면 네트워크 활동이 끝나거나 5초가 지나거나 둘 중에 먼저 끝나는 것이 반환되어서 네트워크 활동이 5초 이상 지연될 경우에도 더이상 기다리지 않고 다음으로 넘어가게 할 수 있다.</p>
<p>반환값을 사용하지 않거나 거부되는 상황이 중요하지 않다면 <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/any"><code>Promise.any</code></a>도 사용할 수 있다. <code>Promise.race</code>는 먼저 거부되는게 있으면 거부된 결과를 반환하는데 비해 <code>Promise.any</code>는 거부된 결과는 무시하고 해결된 결과가 나올때 반환을 한다. 빈 배열을 전달하면 <code>Promise.race</code>는 계속 기다리지만 <code>Promise.any</code>는 거부된 결과를 반환하며 바로 종료된다.</p>
<p><code>Promise.all</code>도 거부냐 해결이냐에 따라서 동작이 약간 다른 <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled</code></a>가 있는데 <code>Promise.all</code>은 거부가 발행하면 이를 반환하며 대기가 끝나지만 <code>Promise.allSettled</code>는 거부냐 해결이냐에 상관없이 모든 결과를 기다린다. <code>Promise.allSettled</code>는 나중에 추가된 스펙이어서 지금까지는 원래 하던대로 <code>Promise.all</code>만 사용하고 있었는데 여러 데이터를 불러오는 작업은 서로 의존성이 없기 때문에 <code>Promise.allSettled</code>가 더 적절해 보인다. <a href="https://velog.io/@eggplantiny/Promise.allSettled-%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%88%9C%EA%B0%84"><code>Promise.allSettled</code>를 쓰면 실패하는 것이 있어도 나머지 성공한 결과를 사용</a>할 수 있기 때문에 유용할 때가 있다.</p></div>    </div></div>

신현석(Hyeonseok Shin)

동시에 여러개의 비동기 처리를 할 때 Promise.all을 사용해서 처리 속도를 올리곤 한다.
const results = await Promise.all([fetchData1(), fetchData2()]);
이렇게 하면 데이터 패칭을 동시에 요청하고 병렬로 둘 다 끝난 후에 results에 [data1, data2]와 같이 데이터가 들어간다.
반면에 Promise.race를 사용하면 모든 처리가 끝날 때 까지 기다리지 않고 먼저 끝나는 것이 반환되어서 일종의 타임아웃을 걸 수 있다.
await Promise.race([
  page.waitForNetworkIdle(),
  new Promise(resolve => setTimeout(resolve, 5000)),
]);
이렇게 하면 네트워크 활동이 끝나거나 5초가 지나거나 둘 중에 먼저 끝나는 것이 반환되어서 네트워크 활동이 5초 이상 지연될 경우에도 더이상 기다리지 않고 다음으로 넘어가게 할 수 있다.
반환값을 사용하지 않거나 거부되는 상황이 중요하지 않다면 Promise.any도 사용할 수 있다. Promise.race는 먼저 거부되는게 있으면 거부된 결과를 반환하는데 비해 Promise.any는 거부된 결과는 무시하고 해결된 결과가 나올때 반환을 한다. 빈 배열을 전달하면 Promise.race는 계속 기다리지만 Promise.any는 거부된 결과를 반환하며 바로 종료된다.
Promise.all도 거부냐 해결이냐에 따라서 동작이 약간 다른 Promise.allSettled가 있는데 Promise.all은 거부가 발행하면 이를 반환하며 대기가 끝나지만 Promise.allSettled는 거부냐 해결이냐에 상관없이 모든 결과를 기다린다. Promise.allSettled는 나중에 추가된 스펙이어서 지금까지는 원래 하던대로 Promise.all만 사용하고 있었는데 여러 데이터를 불러오는 작업은 서로 의존성이 없기 때문에 Promise.allSettled가 더 적절해 보인다. Promise.allSettled를 쓰면 실패하는 것이 있어도 나머지 성공한 결과를 사용할 수 있기 때문에 유용할 때가 있다.

Promise.race로 실행 시간 제한 걸기

댓글