JS - 비동기 처리 - async() + await() with try…catch

IRISH·2024년 4월 29일

JS

목록 보기

76/80

JavaScript의 async 및 await 키워드는 비동기 작업을 처리하는 데 사용되며 동기 또는 차단 코드와 유사한 비동기 코드를 작성할 수 있도록 하여 작성 및 읽기를 더 쉽게 만듭니다. 이는 네트워크 요청을 위해 'fetch' API에서 반환되는 것과 같은 Promise를 처리할 때 특히 유용합니다. 각각에 대한 분석은 다음과 같습니다.

`async`

목적: async 키워드는 함수를 비동기식으로 선언하는 데 사용됩니다. 해당 함수 내에서 await를 사용하면 나머지 애플리케이션 실행을 차단하지 않고 Promise가 해결될 때까지 실행을 일시 중지할 수 있습니다.
작동 방식: async로 함수를 선언하면 Promise를 반환하도록 함수가 자동으로 변환됩니다. 즉, Promise를 명시적으로 반환하지 않더라도 함수는 함수가 반환하는 값에 관계없이 해결되는 Promise를 반환합니다.

예시

async function fetchData() {
  return "data received";
}
fetchData().then(console.log); // Outputs: data received

이 예에서 fetchData 함수는 단순히 문자열을 반환하지만 async 함수이기 때문에 '데이터 수신'으로 확인되는 Promise를 반환합니다.

`await`

목적: await 키워드는 async 함수 내에서 Promise가 해결될 때까지 함수 실행을 일시 중지하여 비동기 작업이 완료되고 값을 반환할 때까지 효과적으로 기다리는 데 사용됩니다.
작동 방식: await는 async 함수 내에서만 사용할 수 있습니다. Promise가 확정될 때까지 비차단 방식으로 함수를 일시 중지합니다. Promise가 이행되면 await 표현식의 값은 Promise의 해결된 값입니다. Promise가 거부되면 await는 try-catch로 처리해야 하는 거부 값을 발생시킵니다.

예시

async function getTodo() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}
getTodo().then(data => console.log(data));

이 예에서 getTodo는 URL에서 데이터를 가져오는 async 함수입니다. await fetch()는 가져오기 요청이 완료되고 응답이 가져온 데이터로 채워질 때까지 getTodo 실행을 일시 중지합니다. 그런 다음 후속 await response.json()은 JSON 처리가 완료될 때까지 일시 중지되고, 그 후에는 데이터를 반환할 때까지 함수가 계속 실행됩니다.

상황에 따른 통합

React 구성 요소 컨텍스트에서 async 및 await를 사용하면 체인 .then() 호출에 의존하지 않고 데이터 가져오기를 깔끔하게 처리할 수 있습니다. 이로 인해 코드가 더 복잡하고 읽기 어려워질 수 있습니다. async 및 await와 결합된 try...catch 구조는 오류 처리를 간단하게 만들고 일반적인 JavaScript 오류 처리 구성과 통합합니다.

useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();
      console.log(data); // Use data here
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  }
  fetchData();
}, []);