본문으로 건너뛰기
실습하기

Async/Await 비동기 처리

async와 await는 JavaScript의 비동기 처리를 보다 쉽고 깔끔하게 도와주는 문법입니다.

프로미스를 사용할 때 .then()과 .catch()로 콜백 함수를 계속 연결하는 것은 코드가 복잡해지고 가독성이 떨어질 수 있습니다.

async/await는 이러한 문제점을 해결하고, 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 도와줍니다.

이러한 비동기 처리는 주로 외부의 서버나 저장소에서 데이터를 가져올 때 사용합니다. 데이터를 가져오는 작업은 시간이 오래 걸릴 수 있기 때문입니다.

참고로 다른 서버에서 데이터를 가져오거나 서버에 데이터를 보내는 등의 작업을 할 때 사용하는 인터페이스을 API라고 합니다.

API는 Application Programming Interface의 약자로, 서버와 통신할 때 사용하는 규칙을 뜻합니다.


async/await 예제
async function fetchUserData() {
  try {
    // fetch 함수를 사용해 외부 API에서 데이터를 가져옴
    const response = await fetch('https://api.example.com/user');

    // JSON 형식으로 파싱
    const data = await response.json();

    // 데이터 출력
    console.log(data);
  } catch (error) {
    console.log('데이터를 가져오는 데 실패했어요:', error);
  }
}

// 함수 호출
fetchUserData();

위 예제에서 async는 비동기 함수를 선언하는 키워드이고, await는 프로미스의 결과를 기다렸다가 반환해주는 키워드입니다.

만약 fetch 호출이나 데이터 파싱에서 문제가 생기면 catch 블록에서 에러를 처리합니다.


특징​

  1. 비동기 함수: async를 사용해 함수를 선언하면 그 함수는 항상 프로미스(Promise)를 반환합니다.

  2. 에러 처리: try/catch 블록으로 에러를 간편하게 처리할 수 있습니다.


음식 주문 예시​

async/await를 주문한 음식을 기다리는 상황을 표현할 수 있습니다.

  • async는 주문을 받는 상황을 함수로 표현합니다.

  • await는 async에서 음식(Promise)이 나올 때까지 기다립니다.

  • try는 음식이 나오면 음식을 먹는 상황을 표현합니다.

  • catch는 음식이 나오지 않는 상황을 표현합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!