자바스크립트 async/await와 네트워크 요청

10 Sep 2023

javascript

자바스크립트에서 네트워크 요청을 처리하기 위해 Promise와 async/await 패턴을 사용하는 것은 흔한 일입니다. async/await는 비동기적으로 실행되는 코드를 보다 간결하고 직관적으로 작성할 수 있도록 도와줍니다. 이 글에서는 자바스크립트의 async/await를 사용하여 네트워크 요청을 처리하는 방법을 알아보겠습니다.

Async/await란?

async/await는 ES2017(ES8)에서 도입된 자바스크립트의 비동기 패턴입니다. async 함수는 명시적으로 비동기 동작을 수행하는 함수임을 나타내는 키워드입니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, 비동기 동작이 완료될 때까지 기다리는 역할을 합니다.

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

위의 예제에서는 getData라는 비동기 함수를 정의하였습니다. 함수 내에서 await 키워드를 사용하여 네트워크 요청을 기다리고, 응답이 도착하면 데이터를 처리하여 반환합니다.

네트워크 요청과 async/await

네트워크 요청은 주로 fetch 함수를 사용하여 처리할 수 있습니다. 이 함수는 Promise 객체를 반환하며, 이를 활용하여 async/await와 함께 사용할 수 있습니다.

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

위의 예제에서는 fetchData라는 비동기 함수를 정의하였습니다. 함수 내에서 try-catch 문을 사용하여 네트워크 요청 중 발생할 수 있는 오류를 처리합니다. fetch 함수는 네트워크 요청을 수행하고 응답을 받아옵니다. 그리고 response.json() 메소드를 사용하여 응답 데이터를 JSON 형식으로 변환합니다. 마지막으로 변환된 데이터를 콘솔에 출력합니다.

Async/await로 병렬 네트워크 요청 처리하기

async/await는 여러 개의 네트워크 요청을 병렬로 처리하는데에도 용이합니다. Promise.all 메소드를 사용하여 여러 개의 Promise를 한 번에 처리할 수 있습니다.

async function fetchMultipleData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  try {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);

    const data = await Promise.all(responses.map(response => response.json()));
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위의 예제에서는 fetchMultipleData 함수를 정의하였습니다. urls 배열에 여러 개의 요청 URL을 정의하고, map 메소드를 사용하여 각 URL을 fetch 함수에 매핑합니다. 그리고 Promise.all을 사용하여 병렬로 모든 요청을 처리합니다. 이후에는 각각의 응답을 JSON 형식으로 변환하여 데이터를 얻고, 마지막으로 데이터를 콘솔에 출력합니다.

마무리

async/await는 자바스크립트에서 비동기 코드를 처리할 때 매우 유용한 도구입니다. 네트워크 요청을 처리하거나 다른 비동기 작업을 수행하는 경우 async/await를 사용하면 코드가 더 읽기 쉽고 유지보수하기 편해집니다. 이러한 이점을 활용하여 효율적인 자바스크립트 개발을 진행해보세요.