자바스크립트의 비동기 프로그래밍에서는 주로 콜백 함수나 Promise 객체를 사용하여 비동기적인 작업을 처리합니다. 그러나 ES2017부터는 async와 await 키워드를 사용하여 보다 명확하고 간결한 비동기 코드를 작성할 수 있게 되었습니다. 이번 글에서는 자바스크립트의 async/await를 이용하여 네트워크 요청을 처리하는 방법에 대해 알아보겠습니다.

async 함수

먼저, async 함수는 비동기 동작을 수행하는 함수임을 나타내는 특별한 함수입니다. async 키워드를 함수 선언 앞에 추가하여 해당 함수가 비동기적으로 동작한다고 명시적으로 선언합니다. 예를 들어, 아래의 예제는 fetchData라는 async 함수를 정의하고 있습니다.

async function fetchData() {
  // 비동기 동작을 수행하는 코드 작성
}

await 키워드

await 키워드는 async 함수 내에서만 사용할 수 있는 키워드로, 앞에 Promise 객체가 오는 비동기 동작이 완료될 때까지 해당 함수의 실행을 일시 중단시킵니다. 이를 통해 우리는 동기적인 코드의 흐름을 유지하면서 비동기 작업을 처리할 수 있습니다.

await 키워드를 사용하기 위해서는 해당 표현식이 Promise를 반환해야 합니다. 만약 Promise가 아닌 값이 주어지면, 해당 값이 즉시 Promise.resolve로 감싸져서 처리됩니다.

예를 들어, 아래의 예제는 fetchData 함수 내에서 fetch 함수를 사용하여 API로부터 데이터를 가져오는 예제입니다.

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:', error);
  }
}

위의 예제에서는 fetch 함수로 데이터를 가져와서 response 객체를 받고, 그 다음 response 객체의 json 메소드를 사용하여 데이터를 파싱해 data 변수에 저장하고 있습니다. 이후 data를 출력합니다. await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다리기 때문에, 코드는 동기적인 흐름으로 작성할 수 있습니다.

에러 처리

async/await를 사용할 때는 예외 처리도 중요합니다. await를 사용할 때, Promise 객체가 reject 된 경우에는 try/catch 문을 사용하여 에러를 처리할 수 있습니다. 위의 예제에서도 try/catch 문을 사용하여 네트워크 요청이 실패하는 경우 에러를 캐치하고 에러 메시지를 출력하도록 처리하고 있습니다.

async function fetchData() {
  try {
    // 비동기 작업을 수행하는 코드 작성
  } catch (error) {
    console.error('Error:', error);
  }
}

결론

async/await를 사용하면 자바스크립트에서 비동기 코드를 보다 쉽게 작성할 수 있습니다. 네트워크 요청과 같은 비동기 작업을 처리할 때는 async/await가 가독성과 유지보수성을 향상시켜줍니다. 대부분의 최신 브라우저와 Node.js는 async/await를 지원하므로, 적절하게 활용하여 비동기 코드를 작성해 보세요.