자바스크립트에서의 비동기 코드 처리

"await"과 "then"의 차이

비동기 프로그래밍은 자바스크립트에서 매우 중요한 주제 중 하나입니다. 비동기작업을 처리시 await과 then은 두가지 주요 방식 중 하나를 선택할 수 있다. 각각의 방식은 자신만의 특징을 가지며, 상황에 따라 더 나은게 있을 것이다.

"then"을 사용하는 방식

"then"은 Promise 객체에서 사용되는 메서드로, 비동기 작업이 완료되면 콜백 함수를 실행합니다. 이 콜백 함수는 비동기 작업이 성공 또는 실패 했을 경우 각각 처리합니다.

ex)"then"을 사용하는 코드

fetch('data/data.json')
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      throw new Error('데이터 가져오기 실패');
    }
  })
  .then(data => {
    console.log('데이터:', data);
  })
  .catch(error => {
    console.error('에러:', error);
  });

"await"을 사용하는 방식

"await"은 비동기 함수 내에서 사용되며, 해당 비동기 작업이 완료될 때까지 실행을 일시 중지합니다. 이를 통해 코드가 동기적으로 작성되는 것처럼 보이게 됩니다.

ex)"await"을 사용하는 코드

async function fetchData() {
  try {
    const res = await fetch('data/data.json');
    if (!res.ok) {
      throw new Error('데이터 가져오기 실패');
    }
    const data = await res.json();
    console.log('데이터:', data);
  } catch (error) {
    console.error('에러:', error);
  }
}

fetchData();

차이점

가독성

"await" 방식은 비동기 코드를 동기 코드와 유사하게 작성할 수 있어 가독성이 높다.
"then"은 중첩된 콜백 함수를 사용할 때 코드가 복잡해질 수 있습니다.

오류 처리

"await"은 try/catch 블록을 사용하여 모든 오류를 쉽게 처리할수 있다.
"then"은 각 "then"블록마다 별도로 오류 처리를 구현해야 한다.

중첩

"await"는 비동기 코드를 평평하게 유지하므로 중첩이 줄어든다.
"then"은 중첩된 콜백 함수가 필요할 수 있다. 이로 인해 "콜백 지옥" 이라고 불리는 코드 문제가 발생할 수 있다.

정리

• 두 가지 서로 다른 비동기 코드 처리 방식이다. 선택은 프로젝트의 요구사항, 코드 가독성, 오류 처리 및 중첩과 같은 요소에 의해 좌우된다.