[javascript] 비동기 코드의 오류 처리 방법

08 Dec 2023

javascript

이 글에서는 JavaScript에서 비동기 코드의 오류 처리 방법에 대해 알아보겠습니다. 비동기 코드는 데이터 로딩, 파일 읽기, 네트워크 요청과 같이 시간이 걸리는 작업을 수행할 때 유용하게 활용됩니다. 그러나 이러한 비동기 작업에서 오류 처리는 매우 중요합니다. 아래에서는 비동기 코드에서 오류를 처리하는 몇 가지 방법을 살펴보겠습니다.

1. 콜백 함수를 이용한 오류 처리

function loadData(callback) {
  setTimeout(() => {
    const error = false; // 예제를 위한 가상의 오류 상황
    if (error) {
      callback('Error occurred', null);
    } else {
      callback(null, 'Data loaded successfully');
    }
  }, 1000);
}

loadData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

콜백 함수를 이용하여 오류와 데이터를 전달하는 방식으로 비동기 작업의 오류를 처리할 수 있습니다. 하지만 이 방법은 콜백 지옥(callback hell)과 같은 문제를 야기할 수 있습니다.

2. Promise를 활용한 오류 처리

function loadData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const error = false; // 예제를 위한 가상의 오류 상황
      if (error) {
        reject('Error occurred');
      } else {
        resolve('Data loaded successfully');
      }
    }, 1000);
  });
}

loadData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Promise를 활용하면 then 및 catch를 사용하여 비동기 작업의 성공 및 실패를 처리할 수 있습니다. 이는 콜백 지옥을 피할 수 있는 장점이 있습니다.

3. async/await 구문을 활용한 오류 처리

async function loadAndHandleData() {
  try {
    const data = await loadData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

loadAndHandleData();

async 및 await 키워드를 사용하여 코드를 보다 선언적이고 동기적으로 작성할 수 있습니다. 이는 가독성과 유지보수성을 향상시키는 장점이 있으며, Promise보다 오류 처리를 직관적으로 할 수 있습니다.

결론

JavaScript에서 비동기 코드의 오류 처리는 콜백 함수, Promise, 그리고 async/await를 활용하여 수행할 수 있습니다. 각 방법마다 장단점이 있으므로 상황에 맞게 적절한 방법을 선택하여 개발하는 것이 중요합니다.

참고 자료: MDN Web Docs - Asynchronous JavaScript