2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

비동기 처리를 위한 'Promise.all'의 사용법은 무엇인가요?

_____
Q1: Promise.all이란 무엇인가요?
A1: Promise.all은 여러 개의 프로미스(Promise)를 병렬로 실행하고, 모든 프로미스가 완료될 때까지 기다린 후 결과를 배열로 반환하는 자바스크립트 내장 함수입니다.

Q2: Promise.all을 사용하는 기본 문법은 어떻게 되나요?
A2:
```javascript
Promise.all([promise1, promise2, promise3])
.then((results) => {
// 모든 프로미스가 성공했을 때 results는 각 프로미스의 결과 배열
})
.catch((error) => {
// 하나라도 실패하면 여기로 에러가 전달됨
});
```

Q3: Promise.all은 언제 주로 사용되나요?
A3: 여러 비동기 작업을 동시에 실행하고, 모든 작업이 완료된 후에 다음 처리를 해야 할 때 사용합니다. 예를 들어, 여러 API 호출을 병렬로 처리할 때 유용합니다.

Q4: Promise.all에 전달되는 인자는 무엇인가요?
A4: 배열 또는 이터러블(iterable)한 객체로, 각 원소는 프로미스이거나 일반 값일 수 있습니다. 일반 값은 즉시 성공(resolve)된 프로미스로 간주합니다.

Q5: Promise.all의 반환값은 무엇인가요?
A5: 반환값은 새로운 프로미스입니다. 이 프로미스는 전달받은 모든 프로미스가 성공할 때 성공하며, 각 결과를 배열로 반환합니다.

Q6: Promise.all에서 하나의 프로미스라도 실패하면 어떻게 되나요?
A6: 배열 내 프로미스 중 하나라도 거부(reject)되면, Promise.all의 반환 프로미스도 즉시 거부되고, catch 블록의 에러 핸들러로 넘어갑니다. 나머지 프로미스 결과는 무시됩니다.
Q7: Promise.all에서 각 프로미스 결과는 어떤 순서로 반환되나요?
A7: 입력 배열 순서대로 결과 배열에 저장됩니다. 즉, 비동기 완료 순서와 상관없이 입력 배열 순서를 유지합니다.

Q8: Promise.all과 async/await를 함께 쓸 수 있나요?
A8: 네, 사용 가능합니다. 예:
```javascript
async function fetchAll() {
try {
const results = await Promise.all([fetch(url1), fetch(url2)]);
// results는 [url1 결과, url2 결과]
} catch (err) {
// 에러 처리
}
}
```

Q9: allSettled, race와 Promise.all의 차이는 무엇인가요?
A9:
- Promise.all은 모든 프로미스가 성공해야 성공. 실패 시 즉시 reject.
- Promise.allSettled는 모든 프로미스의 성공/실패 여부와 상관없이 완료 후 각 결과 상태를 배열로 반환.
- Promise.race는 가장 먼저 완료된(성공 또는 실패) 프로미스의 결과를 반환.

Q10: Promise.all을 사용할 때 주의할 점이 있나요?
A10:
- 프로미스 중 하나라도 실패하면 전체가 실패하므로, 실패 가능성이 있는 프로미스는 별도 에러 처리 필요.
- 너무 많은 프로미스를 한번에 실행하면 리소스 문제 발생 가능. 적절한 병렬 처리 제한이 필요할 수 있음.
- 결과가 입력 순서대로 반환됨을 명심하고, 순서에 의존하는 로직 작성.
`Promise.all`은 JavaScript에서 비동기 <a href='https://sangseek.com/sangseeks/작업/ko'>작업</a>을 동시에 처리할 수 있도록 도와주는 메서드입니다. 여러 개의 Promise를 배열로 받아서, 모든 Promise가 이행(<a href='https://sangseek.com/sangseeks/fulfilled/ko'>fulfilled</a>)되거나 하나라도 거부(rejected)될 때까지 기다립니다. 이 메서드는 비동기 작업을 병렬로 실행하고, 모든 작업이 완료된 후 결과를 한 번에 처리할 수 있게 해줍니다. 기본 사용법 `Promise.all`의 기본 문법은 다음과 같습니다: ```javascript Promise.all(iterable) .then((results) => { // 모든 Promise가 이행된 후 실행되는 코드 }) .catch((error) => { // 하나라도 거부된 경우 실행되는 코드 }); ``` - `iterable`: Promise 객체의 배열 또는 이터러블 객체입니다. - `results`: 모든 Promise가 이행된 후, 각 Promise의 결과를 포함하는 배열입니다. 결과의 순서는 입력된 Promise의 순서와 동일합니다. - `error`: 하나의 Promise라도 거부되면 이곳으로 전달됩니다. 예제 다음은 `Promise.all`을 사용하는 간단한 예제입니다: ```javascript function fetchData(url) { return new Promise((resolve, reject) => { setTimeout(() => { if (url) { resolve(`Data from ${url}`); } else { reject('URL is required'); } }, 1000); }); } const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3']; Promise.all(urls.map(fetchData)) .then((results) => { console.log('All data fetched:', results); }) .catch((error) => { console.error('Error fetching data:', error); }); ``` 위의 예제에서 `fetchData` 함수는 주어진 URL에서 데이터를 가져오는 Promise를 반환합니다. `Promise.all`을 사용하여 여러 URL에서 데이터를 동시에 가져오고, 모든 데이터가 성공적으로 가져와지면 결과를 출력합니다. 만약 하나의 URL에서 오류가 발생하면, `catch` 블록이 실행됩니다. 주의사항 1. 거부된 Promise : `Promise.all`은 배열 내의 모든 Promise가 이행될 때까지 기다리며, 하나라도 거부되면 즉시 거부된 Promise의 이유를 반환합니다. 이로 인해 다른 Promise의 결과는 무시됩니다. 2. 빈 배열 : `Promise.all`에 빈 배열을 전달하면, 즉시 이행된 Promise를 반환합니다. 이는 `[]`를 인자로 전달할 경우 `Promise.resolve([])`와 동일한 동작을 합니다. 3. 결과 순서 : `Promise.all`의 결과 배열은 입력된 Promise의 순서와 동일합니다. 즉, 비동기 작업의 완료 순서와 관계없이 결과는 항상 입력 순서에 맞춰 배열로 반환됩니다. 결론 `Promise.all`은 여러 비동기 작업을 동시에 처리하고, 모든 작업이 완료된 후 결과를 한 번에 처리할 수 있는 유용한 도구입니다. 이를 통해 코드의 가독성을 높이고, 비동기 작업의 <a href='https://sangseek.com/sangseeks/효율/ko'>효율</a>성을 극대화할 수 있습니다. 하지만, 하나의 Promise라도 거부될 경우 전체 작업이 실패하게 되므로, 이를 적절히 처리하는 것이 중요합니다.
작성자: 박지우 [비회원] | 작성일자: 1년 전 2024-09-12 16:03:42
조회수: 214 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.