자바스크립트 async/await 문법

10 Sep 2023

javascript

자바스크립트는 콜백 함수 또는 프로미스를 사용하여 비동기 코드를 처리하는 것이 일반적입니다. 그러나 ES8(ES2017)에서 도입된 async/await 문법은 비동기 코드를 더 읽기 쉽고 작성하기 쉽게 만들어줍니다. 이 문법은 비동기적인 작업을 동기적으로 실행되는 것처럼 보이도록 해주며, 콜백 지옥(callback hell)을 피할 수 있는 강력한 도구입니다.

async 함수

async 함수는 함수 선언 앞에 async 키워드를 붙여 표시됩니다. 이 함수는 항상 Promise를 반환하며, 암시적으로 Promise를 생성합니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

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

위의 예제는 fetchUserData라는 async 함수로, fetch 함수를 사용하여 서버에서 사용자 데이터를 가져오고, 응답을 JSON 형식으로 파싱하여 반환합니다. await 키워드는 비동기 작업이 완료될 때까지 함수의 실행을 일시 중단합니다.

await 키워드

await 키워드는 async 함수 내에서만 사용할 수 있습니다. 비동기 함수나 프로미스 앞에 await 키워드를 사용하면, 해당 비동기 작업이 완료될 때까지 대기합니다. 이 작업이 성공적으로 완료되면 결과를 반환하고, 실패하면 예외를 throw합니다.

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);
  }
}

위의 예제는 fetch 함수를 사용하여 서버에서 데이터를 가져오고, 가져온 데이터를 콘솔에 출력하는 fetchData 함수입니다. try-catch 문을 사용하여 비동기 작업이 실패한 경우 에러를 처리할 수 있습니다.

에러 처리

async/await 문법을 사용할 때 주의해야 할 것 중 하나는 에러 처리입니다. 일반적으로 프로미스 체인에서 발생한 에러는 .catch() 메서드로 처리되지만, async/await에서는 try-catch 문으로 에러를 처리할 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Failed to fetch data');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

위의 예제에서는 서버 응답이 성공적이지 않은 경우 throw 키워드를 사용하여 에러를 발생시킵니다. catch 블록에서는 에러를 콘솔에 출력하고 다시 발생시키는 것을 확인할 수 있습니다. 호출 코드에서 이 함수를 사용할 때, try-catch 문으로 감싸거나 .catch()를 이용하여 에러를 처리할 수 있습니다.

결론

async/await 문법은 자바스크립트에서 비동기 코드를 더 간결하고 읽기 쉽게 작성하는 데 도움을 줍니다. 코드를 더 구조화하고 에러 처리를 간편하게 만들어주어 개발자들에게 유용한 기능입니다. 코드의 가독성을 향상시키고 콜백으로 인해 발생하는 복잡성을 해결하기 위해 async/await 문법을 적극 활용해보세요.

async/await 문법에 대해 더 자세히 알아보려면 MDN 문서를 참조하세요.