자바스크립트 Promise.allSettled() 이해하기

Promise.allSettled(iterable);

• Promise.allSettled()메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다.
• 일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용합니다.
• 반환된 각 객체별로 status를 확인할 수 있습니다. 만약 fulfilled상태라면 value를, rejected상태라면 reason속성을 확인할 수 있습니다. value나 reason을 통해 각 Promise가 어떻게 이행(또는 거부)됐는지 알 수 있습니다.

예시

Promise.allSettled([
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  99, // 일반값도 all메서드와 같이 resolve로 감싸집니다.
  Promise.reject(new Error('an error'))
])
.then(values => console.log(values));

// [
//   {status: "fulfilled", value: 33},
//   {status: "fulfilled", value: 66},
//   {status: "fulfilled", value: 99},
//   {status: "rejected",  reason: Error: an error}
//

실제코드 예시

/*
    fetch를 사용해 여러 정보를 가져오고 있다고 해봅시다.
    여러 요청 중 하나가 실패해도 다른 요청 결과는 여전히 필요합니다.
    이럴 때 Promise.allSettled를 사용할 수 있습니다.
*/

let order = [
  'https://jsonplaceholder.typicode.com/todos/1',
  'https://jsonplaceholder.typicode.com/todos/2',
  'https://jsonplaceholder.typicode.com/todos/error' // 실패
];

Promise.allSettled(order.map((url) => fetch(url))) // order에 있는 url fetch
  .then((results) => {
    results.forEach((result, index) => {
      console.log(`${index + 1}번째 프라미즈 상태 코드 : `, result.status)
    }
    );
    return results;
  })
  .then((results) => {
    results.forEach((result, index) => {
      if (result.value.status == '200') {
        // 성공일 때
        console.log(`(res)${order[index]}: ${result.value.status}`);
        result.value.json().then(data => {
          console.log("Data is : ", data)
        })
      } else if (result.value.status == '404') {
        // 잘못된 url 일 때
        console.log(`(rej)${order[index]}: ${result.statusText}`);
      }
    });
  })
  .catch((results) => {
    console.log('in catch block : ', results)
    return results
  })
  .finally(() =>
    console.log('Promise.allSettled 완료')
 }

• jsonplaceholder의 url을 fetch할 경우 없는 url이라도 상태코드에서 404를 주지 요청이 실패하는건 아닌 것 같습니다.
• 따라서 전부다 fullfilled로 들어오기때문에 allSettled된 값을 보고 에러처리를 해줬습니다.
• 원래는 이행, 거절 상태에 따라 fullfilled, rejected 로 구분하여 처리를 해줄 수 있습니다.