JavaScript에서 비동기 작업을 처리하기 위해 Promise가 많이 사용됩니다. Promise는 비동기 작업의 결과를 나타내는 객체로, then과 catch를 사용하여 비동기 작업의 성공과 실패를 처리할 수 있습니다.

그러나 Promise를 사용하면 연속된 비동기 작업을 처리하기가 어렵습니다. 이때 async/await 문법을 사용하면 비동기 작업을 동기적으로 처리할 수 있습니다. async/await은 ES2017부터 추가된 문법으로, 비동기 함수를 처리하고 결과를 반환하기 쉽게 만들어줍니다.

이제 async/await 문법을 사용하여 Promise 기반의 동기적인 코드를 작성해보겠습니다.

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('Error fetching user data:', error);
  }
}

async function displayUserData() {
  const userData = await fetchUserData();
  console.log('User data:', userData);
}

displayUserData();

위 코드에서는 fetchUserData라는 비동기 함수를 만들어 사용자 데이터를 가져오는 작업을 수행합니다. fetch 함수는 Promise를 반환하므로 await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기합니다. 이후 response.json()을 호출하여 응답 데이터를 JSON 형태로 변환하고 반환합니다.

displayUserData 함수에서는 fetchUserData 함수를 호출하여 사용자 데이터를 가져온 후 결과를 출력합니다. 이를 위해 await 키워드를 사용하여 비동기 작업의 완료를 기다립니다.

이제 위와 같이 async/await 문법을 사용하여 Promise 기반의 동기적인 코드를 작성할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

#javascript #asyncawait