자바스크립트 - Promise all, allSettled 사용법, 차이점

자바스크립트에서

비동기 작업 중 여러개의 API를 동시에 호출하고

모든 비동기 작업이 완료 되었을 때, 새로운 코드를 작성하고 싶을 때가 있습니다.

 

또, 여러개의 API를 순차적으로 날리지 않고 동시에 호출하여 웹 성능을 향상할 수도 있습니다.

 

그럴때 Promise 메서드 중 all 과 allSettled 를 사용할 수 있습니다.

 

Promise.all()

Promise.all() 의 경우에는 n개의 비동기 함수를 동시에 실행하고 모든 함수가 완료하면, 함수의 결과 값을 반환합니다.

하지만, 단 하나의 함수라도 실패하면 Promise가 실패되게 됩니다.

 

const response = await Promise.all([
  getExcelFile('name1.xls', 1000),
  getExcelFile('name2.xls', 1000),
]);

 

Promise.allSettled()

Promise.allSettled 의 경우에는 Promise.all() 과 같이 모든 비동기 함수를 실행하고,

모든 함수가 완료하면 함수의 status와 결과값을 반환 합니다.

 

Promise.all() 과의 차이점은 함수가 실패하여도 성공, 실패 여부와 관계 없이 결과값으 반환합니다.

const response = await Promise.allSettled([
  getExcelFile('name1.xls', 1000),
  getExcelFile('name2.xls', 1000),
]);

 

Promise.all() vs Promise.allSettled()

연관된 비동기 작업을 할때, 하나라도 실패시 모두 거부하고 싶을 때, Promise.all() 함수를 사용하는 것이 좋습니다.

 

하지만, 서로 연관되지 않은 비동기 작업을 할 때, 또는 API 성공, 실패 여부와 관계없이 항상 결과값을 알고 싶을 때에는 Promise.allSettled()를 사용하는 것이 좋습니다.