자바스크립트의 async/await와 Promise.all은 비동기 코드를 처리하는 데 유용한 기능입니다. async/await은 비동기 코드를 동기적으로 작성할 수 있게 해주고, Promise.all은 여러 개의 프로미스를 병렬로 처리할 수 있게 해줍니다. 이 두 가지 기능을 함께 사용하면 보다 효율적인 비동기 코드를 작성할 수 있습니다.

async/await 사용하기

async/await는 함수를 비동기 함수로 만들기 위해 사용됩니다. async 키워드로 함수를 선언하면 해당 함수는 내부적으로 프로미스를 반환하게 됩니다. 이렇게 만들어진 프로미스를 await 키워드를 사용하여 동기적으로 기다릴 수 있습니다. 예를 들어, 다음은 비동기적으로 데이터를 가져오는 함수를 async/await로 작성한 예입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

위의 코드에서 fetchData 함수는 비동기 함수로 선언되었습니다. fetch 함수는 네트워크 요청을 수행하여 프로미스를 반환합니다. await 키워드를 사용하여 fetch 함수의 결과를 동기적으로 기다린 후에, response 객체에서 JSON 데이터를 추출하여 반환합니다. 에러 처리는 try/catch 블록을 사용하여 수행할 수 있습니다.

Promise.all 사용하기

Promise.all은 여러 개의 프로미스를 병렬로 처리하여 모든 프로미스가 완료될 때까지 기다리는 기능입니다. Promise.all에 전달된 프로미스 배열은 모두 완료될 때까지 기다린 후, 각 프로미스의 결과를 배열로 반환합니다. 예를 들어, 다음은 여러 개의 네트워크 요청을 동시에 처리하는 예입니다.

async function fetchMultipleData() {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];
  
  const promises = urls.map(url => fetch(url).then(response => response.json()));
  
  try {
    const results = await Promise.all(promises);
    return results;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

위의 코드에서 fetchMultipleData 함수는 여러 개의 네트워크 요청을 병렬로 처리하는데 사용됩니다. urls 배열에 요청할 URL들을 저장하고, 각 URL별로 fetch 함수를 호출하여 프로미스를 생성합니다. Promise.all에 전달된 프로미스 배열을 await 키워드로 동기적으로 기다린 후, 모든 결과를 배열로 반환합니다.

async/await와 Promise.all 함께 사용하기

async/await와 Promise.all은 함께 사용하여 보다 효율적이고 가독성이 좋은 비동기 코드를 구현할 수 있습니다. 예를 들어, 다음은 여러 개의 데이터를 동시에 가져오는 예입니다.

async function fetchAllData() {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];
  
  const promises = urls.map(url => fetch(url).then(response => response.json()));
  
  try {
    const results = await Promise.all(promises);
    return results;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

위의 코드에서 fetchAllData 함수는 fetchMultipleData 함수와 동일한 방식으로 동작합니다. urls 배열에 요청할 URL들을 저장하고, 각 URL별로 fetch 함수를 호출하여 프로미스를 생성합니다. 다만, 여러 개의 프로미스를 생성할 때도 동기적으로 기다리기 위해 await Promise.all(promises)를 사용하였습니다.

이렇게 async/await와 Promise.all을 함께 사용하면 비동기 코드를 보다 명확하고 간결하게 작성할 수 있으며, 동시에 여러 개의 비동기 작업을 효율적으로 처리할 수 있습니다.