자바스크립트에서 비동기 처리를 쉽게 다룰 수 있는 기능인 async/await은 프로미스를 기반으로 하여 비동기 코드를 동기식으로 작성할 수 있도록 해줍니다. 이를 통해 코드의 가독성을 향상시키고, 에러 처리를 더욱 효과적으로 할 수 있습니다.

async/await란?

async/await는 ES8(ECMAScript 2017)에서 추가된 자바스크립트의 비동기 처리 패턴 중 하나입니다. async라는 키워드를 함수 앞에 붙이고, 그 안에서 await 키워드를 사용하여 비동기 함수 호출 결과를 동기적으로 처리할 수 있습니다.

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

위 예시에서 fetchData 함수가 async로 선언되었습니다. 이 함수 안에서 await 키워드를 사용하여 fetch 함수와 response.json() 메소드를 호출하고, 해당 비동기 작업들이 완료되어 결과가 반환될 때까지 기다립니다. 이후 data를 반환하게 됩니다.

async/await를 통한 에러 처리

async/await를 사용하면 try-catch 문을 활용하여 에러 처리를 간편하게 할 수 있습니다. 비동기 작업 중 발생한 에러에 대해서도 try-catch 문을 사용하여 처리할 수 있습니다.

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

위 예시에서 fetch 함수나 response.json() 메소드에서 에러가 발생하면, 에러가 catch 블록으로 이동하여 콘솔에 에러 메시지를 출력하고 해당 에러를 다시 throw합니다. 이렇게 함으로써 fetchData 함수를 호출하는 곳에서도 에러를 적절하게 처리할 수 있습니다.

async/await와 프로미스

async/await는 프로미스를 기반으로 동작하기 때문에, 프로미스를 반환하는 함수에서 사용할 수 있습니다. 즉, 프로미스 체이닝을 사용하는 코드를 async/await로 간결하게 표현할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve('Data successfully fetched');
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 2000);
  });
}

async function process() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

process();

위 예시에서 fetchData 함수는 비동기 작업을 수행하는 프로미스를 반환합니다. process 함수에서 await 키워드를 사용하여 fetchData 함수를 동기식으로 호출하고, 결과값을 변수 data에 저장합니다. 첫 번째 예시와 마찬가지로 에러가 발생하면 catch 블록으로 이동하여 에러 메시지를 출력합니다.

결론

async/await는 자바스크립트에서 비동기 처리를 효율적으로 다룰 수 있는 기능입니다. 코드의 가독성을 높이고, 에러 처리를 간편하게 할 수 있어 개발자들에게 많은 편의를 제공합니다. 따라서 비동기 작업을 다룰 때는 async/await를 적극적으로 활용하는 것을 권장합니다.