-
JS 유용한 Promise활용Tip 2022. 2. 3. 19:19728x90
ES2015에서 Promise.all, Promise.race가 나온 뒤, ES2020에서 Promise.allsettled가 나왔다.
그리고 Promise.any가 새로 나왔다.
위 4가지를 간단하게 비교해보려 한다.
Promise.all([success(), fail()]) // Error Promise.race([fail(), delay(5000)]) // Error Promise.allsettled([success(), fail()]) // success, Error Promise.any([delay(5000), fail()]) // delay
간단하게 비교한다면 위와 같다.
먼저 가장 먼저 나온 all, race에 대해 말하자면,
1. Promise.all
Promise.all은 아무리 많은 양의 Promise들이 성공하더라도 단 하나의 Promise라도 rejected가 된다면 실패한다.
그래서 주로 초기 로딩과 같은 상황에서 여러 api요청을 보낼 때 병렬 처리로 보내 시간 단축을 노릴 때 많이 사용한다.
const apis = [ fetch("/test/a").then(() => "a"), fetch("/test/b").then(() => "b"), fetch("/test/c").then(() => "c"), ]; try { await Promise.all(promises); } catch (error) { throw new Error(error); }
2. Promise.race
Promise.race는 Promise.all과 달리 fullfiled와 rejected를 가리지 않고 가장 먼저 Promise가 종료되면 끝이 난다.
개인적으로 본인은 자주 사용하지 않는데, 이 글을 작성하며 활용성을 생각한다면, api요청 결과의 제한시간을 두는 방법으로 사용할 수 있다.
const timeouts = [ fetch("/test/a").then(() => "a"), setTimeout(() => { reject('5sec timeout!'); }, 1000); ]; try { await Promise.race(timeouts); } catch (error) { throw new Error(error); // 5sec timeout! }
3. Promise.allsettled
Promise.all을 사용하며 가장 바란 함수다.
fullfiled와 rejected를 가리지 않고 모두 끝나면 종료되며 all과 같이 초기 로딩 등의 상황에서 api를 병렬로 처리할 때 유용하며, 성공 실패를 가리지 않는다는 점에서 다른 api들의 성공 여부에 독립적이다.
const apis = [ fetch("/test/a").then(() => "a"), fetch("/test/b").then(() => "b"), fetch("/test/c").then(() => "c"), ]; try { await Promise.allsettled(promises); } catch (error) { throw new Error(error); }
4. Promise.any
Promise.race와 거의 비슷하며 다른 점이라면 Promise.race는 fullfiled와 rejected를 가리지 않는다는 것이고, any는 rejected는 무시하고 가장 먼저 fullfiled 된 요소를 체크한다.
그래서 주로 하나의 이미지 등을 여러 cdn등에서 불러오고 가장 먼저 로드된 이미지를 보여주는 식으로 활용할 수 있다.
const apis = [ fetch("/test/a").then(() => "a"), fetch("/test/b").then(() => "b"), ]; try { const img = await Promise.any(promises); } catch (error) { throw new Error(error); }
ps. allsettled는 ES2020에서 들어온 요소이고 any는 ES2021에서 들어온 요소로 자신의 babel설정 등을 확인하여 사용하길 바란다.
'Tip' 카테고리의 다른 글
VSCode Custom Snippet 만들기 (0) 2022.04.12 'Window & typeof globalThis' 형식에 '*' 속성이 없습니다. ts(2339) 해결하기 (0) 2022.02.08 React 유용한 Tip 3가지 모음 (0) 2022.01.18 Redux Toolkit Dependency cycle Error (0) 2021.12.16 VSCode ESLint, Prettier 자동 수정 적용안될 때 (0) 2021.12.08