자바스크립트에서 비동기 작업은 Promise를 통해 처리됩니다. 그러나 Promise를 사용할 때 많은 중첩된 콜백 함수를 작성해야 하는 경우 코드가 복잡해지고 유지 보수하기 어려워집니다. 이를 해결하기 위해 자바스크립트는 async/await 문법을 도입했습니다. async/await를 사용하면 비동기 코드를 동기적인 방식으로 작성할 수 있어 코드의 가독성과 유지 보수성을 개선할 수 있습니다.

async function 선언

비동기 작업을 처리할 수 있는 함수를 만들려면 async 키워드를 사용하여 함수를 선언합니다. 일반적으로 async function 문법을 사용하며, 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다.

async function fetchData() {
  // 비동기 작업 수행
  const data = await fetch('https://api.example.com/data');
  return data;
}

await 키워드

await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다. await는 항상 async 함수 내에서 사용되어야 하며, 프로미스를 반환하는 비동기 함수나 메소드 에서 호출됩니다. await 키워드 뒤에 오는 표현식은 일반적으로 프로미스를 반환하는 비동기 작업이어야 합니다.

async function fetchData() {
  // 비동기 작업 수행
  const data = await fetch('https://api.example.com/data');
  return data;
}

fetchData().then(data => {
  console.log(data);
});

try-catch 문으로 오류 처리

async/await를 사용하면 오류 처리를 위해 try-catch문을 사용할 수 있습니다. await키워드로 호출한 비동기 작업에서 발생한 오류는 try블록 내에서 catch블록으로 전달됩니다.

async function fetchData() {
  try {
    const data = await fetch('https://api.example.com/data');
    return data;
  } catch (error) {
    console.error('Error:', error);
    // 오류 처리
  }
}

fetchData();

병렬 비동기 작업

async/await를 사용하여 병렬로 여러 비동기 작업을 처리할 수 있습니다. 여러 비동기 작업이 동시에 실행되도록 하려면 Promise.all을 사용할 수 있습니다.

async function fetchAllData() {
  const [data1, data2, data3] = await Promise.all([
    fetchData('https://api.example.com/data1'),
    fetchData('https://api.example.com/data2'),
    fetchData('https://api.example.com/data3')
  ]);

  console.log(data1, data2, data3);
}

fetchAllData();

결론

async/await는 자바스크립트에서 비동기 작업을 처리하는 더 간편하고 가독성이 좋은 방법을 제공합니다. 이를 통해 코드의 복잡성을 줄이고 오류 처리를 보다 간단하게 할 수 있습니다. 자바스크립트에서 데이터 검색과 같은 비동기 작업을 수행할 때는 async/await를 적극적으로 활용하면 유지 보수성이 뛰어나고 가독성이 높은 코드를 작성할 수 있습니다.