[javascript] 자바스크립트 비동기 에러 핸들링 패턴

07 Dec 2023

javascript

비동기 작업은 자바스크립트에서 일반적으로 사용되는 기능입니다. 그러나 비동기 작업을 처리하는 동안 에러가 발생할 수 있습니다. 따라서 이러한 에러를 적절하게 처리하는 패턴을 알아보겠습니다.

1. 콜백 함수를 활용한 에러 핸들링

첫 번째 패턴은 콜백 함수를 사용하여 에러를 핸들링하는 방법입니다. 비동기 작업이 완료되면 콜백 함수를 호출하고, 첫 번째 매개변수로 에러 객체를 전달합니다. 이 에러 객체를 확인하여 에러 처리 로직을 수행할 수 있습니다.

function asyncOperation(callback) {
  // 비동기 작업 진행
  // 작업 완료 후 콜백 함수 호출
  if (에러 발생) {
    callback(new Error('에러 메시지'));
  } else {
    callback(null, 결과 데이터);
  }
}

asyncOperation((error, data) => {
  if (error) {
    // 에러 처리 로직
  } else {
    // 정상적인 처리 로직
  }
});

이 패턴은 간단하게 에러를 처리할 수 있지만, 콜백 함수의 중첩으로 인해 콜백 헬(callback hell)이 발생할 수 있습니다.

2. Promise를 활용한 에러 핸들링

콜백 헬을 해결하기 위해 Promise 패턴을 사용할 수 있습니다. Promise를 활용하면 비동기 작업의 결과를 처리하는데 있어서 보다 세련된 문법을 사용할 수 있습니다. Promise는 resolve와 reject라는 두 개의 콜백 함수를 인자로 받고, 작업이 성공할 경우 resolve를 호출하고 작업이 실패할 경우 reject를 호출합니다.

function asyncOperation() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 진행
    // 작업 완료 후 resolve나 reject 호출

    if (에러 발생) {
      reject(new Error('에러 메시지'));
    } else {
      resolve(결과 데이터);
    }
  });
}

asyncOperation()
  .then((data) => {
    // 성공 처리 로직
  })
  .catch((error) => {
    // 에러 처리 로직
  });

이 패턴을 사용하면 콜백 헬을 피할 수 있고, then 메소드를 사용하여 작업의 성공과 에러를 처리할 수 있습니다.

3. async/await를 활용한 에러 핸들링

ES2017 이후에 소개된 async/await 문법은 Promise 패턴을 더욱 간편하게 사용할 수 있게 해줍니다. async 함수 내에서 비동기 작업을 await 키워드로 대기시킬 수 있고, 작업이 완료되면 결과 값을 반환합니다. 만약 작업이 실패할 경우, throw 키워드를 사용하여 에러를 던질 수 있습니다.

async function asyncOperation() {
  try {
    // 비동기 작업 진행
    // 작업 완료 후 결과 값 반환

    if (에러 발생) {
      throw new Error('에러 메시지');
    } else {
      return 결과 데이터;
    }
  } catch (error) {
    // 에러 처리 로직
  }
}

(async () => {
  try {
    const data = await asyncOperation();
    // 성공 처리 로직
  } catch (error) {
    // 에러 처리 로직
  }
})();

async/await 문법을 사용하면 비동기 작업 코드를 동기적인 구조로 작성할 수 있고, 예외 처리를 try-catch 문으로 일괄적으로 처리할 수 있습니다.

마무리

위에서 소개한 세 가지 패턴은 자바스크립트 비동기 작업에서 에러 핸들링을 처리하는 방법입니다. 콜백 함수, Promise, async/await를 사용하여 작업의 성공과 실패를 적절하게 처리할 수 있습니다. 프로젝트의 성격과 개발자의 선호도에 따라 적절한 패턴을 선택하여 사용하면 됩니다.

참고 자료: