자바스크립트에서 비동기 코드를 처리하기 위해 제공되는 async/await 문법은 ES2017(ECMAScript 2017)에서 도입되었습니다. 이는 비동기 작업을 보다 직관적이고 동기적으로 다룰 수 있게 해주는 키워드입니다. async 함수는 항상 Promise를 반환하며, await 키워드는 비동기 작업을 기다린 후 결과를 반환합니다.

async 함수

async 키워드를 사용하여 표시된 함수는 항상 Promise를 반환합니다. 이 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기할 수 있습니다.

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

위의 예제에서 fetch() 함수는 비동기적으로 데이터를 가져오는 작업을 수행하고, response.json()은 데이터를 JSON 형식으로 변환합니다. await 키워드는 비동기 작업이 완료되기를 기다린 후 다음 줄로 진행합니다.

await 키워드

await 키워드는 async 함수 내에서만 사용할 수 있습니다. 이 키워드는 Promise가 처리될 때까지 함수의 실행을 일시 중지하고, Promise의 결과를 반환합니다.

async function processData() {
  const data = await getData();
  
  console.log(data);
}

위의 예제에서 processData() 함수는 getData() 함수를 호출하고, await 키워드를 사용하여 getData() 함수의 처리가 완료될 때까지 대기합니다. 그리고 결과 값을 data 변수에 저장하고 출력합니다.

오류 처리

async/await 문법을 사용할 때에는 오류 처리에 주의해야 합니다. await 키워드를 사용한 비동기 작업이 실패할 경우, 오류가 발생하게 됩니다. 이 오류를 처리하기 위해서는 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 occurred:", error);
    throw error;
  }
}

위의 예제에서 fetch() 함수와 response.json() 함수를 호출하는 부분은 try 블록으로 감싸져 있습니다. 만약 오류가 발생할 경우 catch 블록으로 제어 흐름이 전달되며, 오류를 출력하고 다시 던져집니다.

요약

async/await 문법은 자바스크립트에서 비동기 처리를 좀 더 간편하고 직관적으로 다룰 수 있게 해줍니다. async 함수를 사용하여 비동기 작업을 처리하고, await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 사용할 때에는 오류 처리에 유의해야하며, try/catch 문을 사용하여 오류를 처리할 수 있습니다.