JavaScript async/await 기능

JavaScript 는 싱글 스레드로 작동하기 때문에, 비동기 처리를 통해 사용자 겨엄을 향상시키는 것이 중요하다. 이전에는 callback 이나 Promise를 사용해서 비동기 처리를 다뤘지만, 이러한 방식은 코드의 가독성을 떨어뜨리는 문제가 있다. async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 하여 코드의 가독성을 높이고, 디버깅을 쉽게 만들어 준다.

 

async/await 의 기본원리

• async :  키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환한다.
• await : 키워드는 Promise가 처리될 때까지 기다렸다가 결과 값을 반환한다.

 

async 함수 선언 및 사용법

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

await 키워드를 사용하여 fetch와 response.json()이 완료될 때 까지 기다린 후 data를 출력한다.

 

예외 처리

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

 

 

await 병렬 처리

Promise.all 을 이용하여 병렬 처리를 할 수 있다.

async function fetchMultipleData() {
  const [data1, data2] = await Promise.all([
    fetch('https://api.example.com/data1').then(res => res.json()),
    fetch('https://api.example.com/data2').then(res => res.json())
  ]);
  console.log(data1, data2);
}

 

너무 많은 await 은 코드의 속도 저하를 시킬 수 있고, 비동기 작업이 독립적인 경우 Promise.all을 활용해 병렬 처리를 고려해야 한다.