async await 쓰는 이유

async와 await는 JavaScript에서 비동기 작업을 처리하기 위한 키워드입니다. 비동기 작업은 일반적으로 네트워크 요청, 파일 읽기/쓰기, 데이터베이스 쿼리 등 시간이 오래 걸리는 작업을 말합니다. 이러한 작업은 동기적으로 처리하면 프로그램의 실행이 블로킹되어 다른 작업을 수행할 수 없게 됩니다. 이를 해결하기 위해 비동기 작업을 사용합니다.

async 키워드는 비동기 함수를 정의할 때 사용됩니다. 이 함수는 항상 Promise를 반환하게 됩니다. await 키워드는 비동기 함수 내부에서 다른 비동기 작업이 완료될 때까지 기다리는 역할을 합니다. await 키워드는 Promise 앞에 사용되며, 해당 Promise가 처리될 때까지 함수의 실행을 일시 중단합니다. 이를 통해 코드가 동기적으로 작성되어 가독성이 향상되고, 콜백 함수나 Promise 체인을 사용하는 것보다 코드를 간결하게 작성할 수 있습니다.

아래는 async와 await를 사용하는 예시입니다.

 

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

fetchData();

위의 예시에서 fetchData 함수는 비동기 함수로 정의되어 있습니다. await 키워드를 사용하여 fetch 함수의 완료를 기다리고, 그 결과를 response 변수에 할당합니다. 그 후에는 response.json() 메서드의 완료를 기다려 데이터를 파싱하고, data 변수에 할당합니다. 마지막으로 data를 로그에 출력합니다. 만약 어떤 오류가 발생한다면 catch 블록에서 처리됩니다.


async와 await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있으며, 콜백 함수나 Promise 체인을 사용하는 것보다 코드를 이해하기 쉽고 관리하기 쉽게 만들어 줍니다.