async 함수와 await 키워드 이해하기

 

async 함수와 await 키워드는 JavaScript에서 비동기 코드를 더 읽기 쉽고, 동기 코드처럼 작성할 수 있게 해주는 기능입니다. 이들은 Promise를 사용하는 것보다 코드를 더 간결하게 만들고, 콜백 지옥을 더욱 효과적으로 피할 수 있게 합니다.

 

async 함수

 

async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다. 함수 내부에서 return 값은 자동으로 Promise.resolve()로 감싸집니다.

 

await 키워드

 

await 키워드는 async 함수 안에서만 사용할 수 있으며, Promise가 이행될 때까지 함수 실행을 일시 정지시킵니다. Promise가 이행되면 await은 Promise의 결과 값을 반환합니다. 이는 동기 함수가 값을 반환하는 것과 비슷하게 동작합니다.

 

async 함수 정의 및 사용

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

fetchData().then(data => console.log(data));  // 출력: Data fetched

 

이 예제에서 fetchData 함수는 async 키워드를 사용하여 정의되었습니다. 이 함수는 "Data fetched" 문자열을 반환하며, 이는 자동으로 Promise.resolve()로 감싸져 반환됩니다.

 

await 키워드를 사용한 비동기 작업

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log("Start");
  await delay(2000);  // 2초 대기
  console.log("End");
}

run();

 

이 예제에서는 delay 함수가 Promise를 반환하여, 지정된 시간(ms) 후에 이행됩니다. run 함수는 async 함수로 정의되어 있으며, await 키워드를 사용하여 delay 함수가 완료될 때까지 대기합니다.

 

실제 API 호출 예제

 

async와 await를 사용하여 실제 API 호출을 더 간단하게 처리할 수 있습니다.

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

async function displayUserData(userId) {
  const userData = await fetchUserData(userId);
  if (userData) {
    console.log(`Name: ${userData.name}`);
    console.log(`Email: ${userData.email}`);
  }
}

displayUserData(1);

 

이 예제에서는 fetchUserData 함수가 특정 사용자의 데이터를 API로부터 가져옵니다. await 키워드는 fetch와 response.json() 호출에 사용되어, 비동기적으로 데이터를 가져오고 파싱합니다. displayUserData 함수는 fetchUserData 함수를 호출하고, 가져온 사용자 데이터를 콘솔에 출력합니다.

 

예제 설명

  • 간단한 비동기 함수: async 키워드로 정의된 함수는 항상 Promise를 반환합니다. 따라서 반환된 값을 then()을 통해 처리할 수 있습니다.
  • 비동기 작업 대기: await 키워드를 사용하여 Promise가 해결될 때까지 대기합니다. 이는 then()을 사용하는 것보다 코드가 더 간결하고 읽기 쉽게 만듭니다.
  • API 호출과 에러 처리: try...catch 블록을 사용하여 비동기 함수 내에서 발생할 수 있는 오류를 처리할 수 있습니다. 이는 비동기 작업을 수행할 때 중요한 부분입니다.

이제 async 함수와 await 키워드를 사용하여 비동기 코드를 더욱 간단하고 명료하게 작성할 수 있게 되었습니다. 이를 통해 비동기 작업을 동기 코드처럼 쉽게 다룰 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있습니다.

 

+ Recent posts