Async&Await

YOBY·2023년 10월 18일
0

async/await는 비동기 작업을 처리하기 위한 자바스크립트의 문법적 확장입니다.

이를 사용하면 Promise 기반의 비동기 코드를 더 간결하게 작성할 수 있습니다.


async 함수와 await 키워드:

async: 함수 앞에 async 키워드를 붙이면 해당 함수는 비동기 함수로 정의됩니다.
await: async 함수 내에서만 사용 가능하며, 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 대기합니다.

// 비동기 작업을 수행하는 함수 (Promise를 반환)
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터가 도착했습니다!');
    }, 2000);
  });
}

// async 함수 정의
async function getData() {
  try {
    // await를 사용하여 fetchData() 함수의 완료를 기다림
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

// async 함수 호출
getData();

위 코드에서 일어나는 일을 설명하겠습니다:

  1. fetchData 함수는 2초 후에 Promise를 해결하며, "데이터가 도착했습니다!"를 반환합니다.

  2. getData 함수는 async 함수로 정의됩니다. 따라서 이 함수 내에서 await를 사용할 수 있습니다.

  3. await fetchData()는 fetchData 함수의 완료를 기다립니다. 이때 코드 실행이 일시 중지됩니다.

  4. fetchData 함수가 Promise를 완료하면, 해당 결과가 result 변수에 저장됩니다.

  5. 결과가 성공적으로 도착하면, "데이터가 도착했습니다!"가 콘솔에 출력됩니다.

  6. 만약 에러가 발생하면 catch 블록으로 이동하여 에러를 처리합니다.

0개의 댓글