Promise.all / TypeScript

Promise.all

JavaScript의 비동기 처리를 위한 중요한 도구 중 하나입니다.

이 메서드는 여러 개의 프라미스를 병렬로 처리하고, 모든 프라미스가 해결(resolve)되면 결과를 반환합니다.

만약 하나의 프라미스라도 거부(reject)되면, Promise.all은 즉시 거부되고 나머지 프라미스들의 결과는 무시됩니다.

 

Promise.all은 다음과 같은 상황에서 유용합니다:

1. 여러 비동기 작업을 병렬로 수행하고 싶을 때.
2. 모든 비동기 작업이 완료된 후에 후속 작업을 실행하고 싶을 때.
3. 하나의 작업이라도 실패하면 즉시 에러를 처리하고 싶을 때.

 

Promise.all은 다음과 같은 상황에서 유용합니다:

1. 여러 비동기 작업을 병렬로 수행하고 싶을 때.
2. 모든 비동기 작업이 완료된 후에 후속 작업을 실행하고 싶을 때.
3. 하나의 작업이라도 실패하면 즉시 에러를 처리하고 싶을 때.

 

예제: 여러 API 호출을 병렬로 처리하기

세 개의 API 엔드포인트에서 데이터를 가져오는 비동기 함수를 작성하고, 이 함수들을 Promise.all로 병렬 처리합니다.

Step 1: API 호출 함수 작성

먼저, 데이터를 가져오는 비동기 함수를 작성합니다. 각 함수는 프라미스를 반환합니다.

 

// Importing axios for making HTTP requests
import axios from 'axios';

// Define a type for the API response
interface ApiResponse {
  data: any;
}

const fetchDataFromApi1 = (): Promise<ApiResponse> => {
  return axios.get('https://api.example.com/data1');
};

const fetchDataFromApi2 = (): Promise<ApiResponse> => {
  return axios.get('https://api.example.com/data2');
};

const fetchDataFromApi3 = (): Promise<ApiResponse> => {
  return axios.get('https://api.example.com/data3');
};

 

Step 2: Promise.all을 사용하여 병렬 처리

이제, 위에서 정의한 세 개의 비동기 함수를 Promise.all로 병렬 처리합니다.

const fetchAllData = async (): Promise<void> => {
  try {
    const [response1, response2, response3] = await Promise.all([
      fetchDataFromApi1(),
      fetchDataFromApi2(),
      fetchDataFromApi3()
    ]);

    console.log('Data from API 1:', response1.data);
    console.log('Data from API 2:', response2.data);
    console.log('Data from API 3:', response3.data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
};

fetchAllData();

 

설명

1. fetchDataFromApi1, fetchDataFromApi2, fetchDataFromApi3 함수는 각각 다른 API 엔드포인트에서 데이터를 가져오고 프라미스를 반환합니다.
2. fetchAllData 함수는 async로 선언되어 있으며, try...catch 블록을 사용하여 에러를 처리합니다.
3. Promise.all은 세 개의 비동기 함수 호출을 배열로 받아 병렬로 실행합니다.
4. 모든 프라미스가 해결되면, 각 API의 응답을 배열로 반환하며, 구조 분해 할당(destructuring assignment)을 사용하여 개별 응답을 변수에 할당합니다.
5. 각 API로부터 받은 데이터를 콘솔에 출력합니다.
6. 만약 하나의 프라미스라도 거부되면, catch 블록이 실행되고 에러를 콘솔에 출력합니다.

이 예제는 Promise.all이 어떻게 여러 비동기 작업을 병렬로 처리하고, 모든 작업이 완료된 후에 결과를 얻는지 보여줍니다