[JS] 비동기 함수 async&await에 대해 알아보자 !

 

async, await

 

 

async와 await는 JavaScript에서 비동기 코드를 작성하는 방법이다.

 

비동기 코드란 코드가 실행되는 동안 다른 코드가 실행될 수 있는 코드를 의미한다.

 

이는 웹 애플리케이션에서 서버로부터 데이터를 받아오거나, 사용자와의 상호작용 등에서 유용하게 사용된다.

 

 

출처 : https://learnjs.vlpt.us/async/

 

 

async 키워드는 함수를 비동기 함수로 만든다.

이 함수는 Promise 객체를 반환하며, Promise 객체는 비동기 작업이 완료되면 결과를 반환한다.

 

await 키워드는 Promise 객체의 결과를 기다리며, 해당 결과가 반환될 때까지 코드 실행을 일시 중지한다.

 

이렇게 하면 코드가 비동기 작업이 완료될 때까지 기다리지 않아도 되며, 콜백 함수나 Promise 체인 등을 작성하지 않아도 된다.

 

예를 들어, 다음과 같은 비동기 함수가 있다고 가정해보자.

 

function getData() {
  return fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))
}

 

이 코드는 fetch 함수를 사용하여 데이터를 가져와 JSON으로 변환한 후 데이터를 콘솔에 출력한다.

그러나 이 코드는 Promise 체인을 사용하고 있으며, 오류 처리를 위해 catch 블록을 추가해야 한다.

 

이 코드에서 async와 await를 사용하게 되면 이 코드를 간결하게 작성할 수 있다.

 

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

 

이렇게 적절히 async와 await을 사용하면 코드가 간결하고 가독성이 좋아지며, 오류 처리도 쉬워진다는 장점이 있다.