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

14 Dec 2023

javascript

JavaScript에서 비동기 함수를 사용할 때, 이 함수의 반환 값을 어떻게 처리해야 하는지에 대한 방법을 알아보겠습니다.

콜백 함수 활용

가장 일반적인 방법은 콜백 함수를 사용하여 비동기 함수의 반환 값을 처리하는 것입니다.

function fetchData(callback) {
  setTimeout(function() {
    let data = '데이터를 불러왔습니다';
    callback(data);
  }, 1000);
}

fetchData(function(result) {
  console.log(result);
});

위의 예제에서 fetchData 함수는 비동기적으로 데이터를 불러오고, 콜백 함수를 호출하여 결과를 반환합니다.

프로미스 활용

ES6부터 도입된 프로미스는 더욱 간편한 방법을 제공합니다.

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = '데이터를 불러왔습니다';
      resolve(data);
    }, 1000);
  });
}

fetchData().then(function(result) {
  console.log(result);
});

프로미스를 사용하면 비동기 함수의 결과를 then 메서드를 통해 처리할 수 있습니다.

Async/Await 활용

ES8에서 추가된 async와 await 키워드를 사용하면 더욱 간단하고 직관적으로 비동기 함수의 반환 값을 처리할 수 있습니다.

async function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = '데이터를 불러왔습니다';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  let result = await fetchData();
  console.log(result);
}

getData();

async 키워드를 함수 앞에 붙이고, await 키워드를 사용하여 비동기 처리를 기다린 후 결과를 반환합니다.

위의 방법들을 통해 JavaScript에서 비동기 함수의 반환 값을 처리하는 방법을 살펴보았습니다.

참고문헌: