Javascript 시작하기 - 비동기

await는 자바스크립트의 비동기 프로그래밍에서 매우 중요한 키워드로, async 함수 내에서만 사용됩니다. await 키워드는 프라미스가 처리될 때까지 함수 실행을 일시 중지하고, 프라미스가 해결되면 결과 값을 반환합니다. 이는 비동기 코드를 작성할 때 코드의 가독성을 크게 향상시킵니다.

async와 await 사용 예제

먼저 async 키워드는 함수가 비동기 함수를 반환하도록 합니다. await 키워드는 async 함수 내에서만 사용할 수 있습니다.

기본 사용법

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));

위 코드에서 fetchData 함수는 async 함수로 선언되어 있으며, fetch 호출을 await 키워드를 사용하여 기다립니다. fetch는 프라미스를 반환하므로, await는 이 프라미스가 해결될 때까지 기다린 후 결과 값을 반환합니다.

async 함수 예제

async function getUserData(userId) {
  try {
    let response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let user = await response.json();
    return user;
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

getUserData(1).then(user => console.log(user));

이 예제에서는 getUserData 함수가 async로 선언되어 있으며, fetch 요청이 완료될 때까지 기다립니다. 만약 네트워크 응답이 성공적이지 않으면, 에러를 던지고 이를 catch 블록에서 처리합니다.

await와 Promise.all()

여러 비동기 작업을 동시에 수행하고 싶을 때 Promise.all()과 함께 사용할 수 있습니다.

async function getUserAndPosts(userId) {
  try {
    let [userResponse, postsResponse] = await Promise.all([
      fetch(`https://jsonplaceholder.typicode.com/users/${userId}`),
      fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
    ]);

    let user = await userResponse.json();
    let posts = await postsResponse.json();

    return { user, posts };
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

getUserAndPosts(1).then(data => console.log(data));

위 코드에서 Promise.all()은 두 개의 fetch 요청을 병렬로 수행하며, 두 요청 모두 완료될 때까지 기다립니다. 그런 다음 두 응답을 JSON으로 변환하고 반환합니다.

에러 핸들링

await는 비동기 코드에서 try...catch 구문을 사용하여 에러를 쉽게 처리할 수 있게 합니다.

async function fetchDataWithErrorHandling(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchDataWithErrorHandling('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error('Final catch:', error));

이 예제에서는 try...catch 블록을 사용하여 fetch 요청에서 발생할 수 있는 모든 에러를 처리합니다. 만약 fetch 요청이 실패하면, 에러 메시지가 콘솔에 출력됩니다.

결론

async와 await는 자바스크립트의 비동기 프로그래밍을 단순화하고 코드의 가독성을 크게 향상시킵니다. Promise를 사용하는 대신, async 함수를 사용하고 await 키워드를 통해 프라미스가 해결될 때까지 기다릴 수 있습니다. 이를 통해 비동기 작업을 동기 작업처럼 작성할 수 있어 코드 작성이 훨씬 간단해집니다.