Front-end/JavaScript

JS 비동기 6편 - allSettled, any

파리외 개발자 2023. 4. 18. 23:19

allSettled

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 6000));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 3000));

Promise.all([promise1, promise2])
  .then((data) => console.log(data))
  .catch(() => console.log("err"));

promise 두 개중 하나는 6초 뒤 성공, 하나는 3초 뒤 실패를 하도록 세팅하고

all을 사용해 promise를 실행시키면 catch문만 실행된다.

//allSettled
Promise.allSettled([promise1, promise2])
  .then((data) => console.log(data))
  .catch(() => console.log("err"));

allSettled를 사용하면 api에러가 나도 catch문을 실행시키는 것이 아니라

api상태의 배열을 리턴한다.

만약 모두 실패하더라도 위처럼 배열로 reject상태를 띄우게 된다.

any

//any
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});

(async function () {
  const result = await Promise.any([p1, p2, p3]);
  console.log(result); // Prints "A", "B" or "C"
})();

any는 제일 먼저 성공하는 api를 출력한다.

위 api들은 setTimeout에 랜덤값을 주었으므로 

제일 빨리 결과를 내는 api도 랜덤이므로 any를 실행시키면

A, B, C가 랜덤으로 출력된다.

제일 먼저 성공하는 api를 호출하므로 A와 B를 reject로 변경해 준다면

C만 출력하게 된다.

 만약 모든 api가 실패한다면 위와 같은 에러가 뜨며 실행되지 않는다.

'Front-end > JavaScript' 카테고리의 다른 글

JS 모듈 1편 - 모듈의 필요성  (0) 2023.05.21
JS 비동기 7편 - job queue  (0) 2023.04.26
JS 비동기 5편 - parallel, race, sequencial  (0) 2023.04.13
JS 비동기 4편 - for await of  (0) 2023.04.12
JS 비동기 3편 - finally  (0) 2023.04.10