[웹 개발 기초 자바스크립트] 19. Async, Await

Shy·2023년 9월 3일
0

NodeJS(Express&Next.js)

목록 보기
21/39

Async/Await

async/await는 JavaScript의 ES2017(ES8)에 도입된 문법으로, Promise를 더 간결하고 가독성 좋은 방식으로 다룰 수 있게 해준다. 기존의 Promise와 .then() 체이닝을 사용하는 대신에, 비동기 코드를 마치 동기 코드처럼 작성할 수 있다.

async

async 키워드는 함수 앞에 위치하며, 해당 함수는 비동기로 실행됨을 나타낸다. async 함수는 항상 Promise 객체를 반환하게 된다.

async function fetchData() {
  return 'Data fetched';
}

fetchData().then(result => console.log(result)); // Data fetched

await

await 키워드는 async 함수 내부에서만 사용할 수 있으며, Promise가 resolve 또는 reject될 때까지 함수의 실행을 일시적으로 멈춘다.

async function fetchDataAndProcess() {
  const data = await fetchDataFromServer();  // Promise가 resolve될 때까지 기다림
  const processed = await processData(data); // Promise가 resolve될 때까지 기다림
  return processed;
}

에러 처리

async/await에서는 try/catch를 사용하여 에러를 처리할 수 있다.

async function fetchDataAndProcess() {
  try {
    const data = await fetchDataFromServer();
    const processed = await processData(data);
    return processed;
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

비동기 함수와 일반 함수

비동기 함수는 일반 함수와 거의 동일하게 작동하나, 두 가지 주요 차이점이 있다.

  1. 비동기 함수는 항상 Promise를 반환한다.
  2. await 키워드를 사용하여 Promise가 완료될 때까지 기다릴 수 있다.

이러한 특성 덕분에 async/await는 비동기 프로그래밍을 훨씬 간편하게 만들어 준다.

profile
스벨트 자바스크립트 익히는중...

0개의 댓글