[javascript] 비동기 함수의 처리 방법

18 Dec 2023

javascript

자바스크립트에서 비동기 함수는 코드 실행 흐름을 중단시키지 않고 백그라운드에서 작업을 처리할 수 있게 해줍니다. 대표적인 예로는 HTTP 요청, 파일 읽기/쓰기, 타이머 기능 등이 있습니다. 이때 비동기 함수의 결과를 어떻게 다루는지에 대한 방법을 알아보겠습니다.

콜백 함수

가장 기본적인 방법은 콜백 함수를 사용하는 것입니다. 비동기 함수의 작업이 완료되면 콜백 함수가 실행되어 결과를 처리합니다.

function fetchData(callback) {
  // 비동기 작업 수행
  setTimeout(() => {
    const data = "데이터";
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

Promise

ES6부터 추가된 Promise는 콜백 지옥(callback hell)을 해결하고자 등장했습니다. 비동기 작업의 상태에 따라 처리할 내용을 지정할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
      const data = "데이터";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
});

Async/Await

ES8에서 도입된 Async/Await 문법은 Promise를 더 간결하게 다룰 수 있는 방법을 제공합니다.

async function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
      const data = "데이터";
      resolve(data);
    }, 1000);
  });
}

(async () => {
  const result = await fetchData();
  console.log(result);
})();

위와 같이 콜백 함수, Promise, Async/Await 등을 활용하여 비동기 함수의 처리를 다양하게 할 수 있습니다.

참고 자료: