자바스크립트 Promise 객체를 활용한 비동기 처리

10 Sep 2023

javascript

비동기 처리는 웹 개발에서 필수적인 부분이며 자바스크립트에서는 Promise 객체를 활용하여 효율적으로 비동기 작업을 처리할 수 있습니다. Promise는 비동기 작업의 결과를 나타내는 객체로, 작업이 완료되거나 실패했을 때 콜백 함수를 호출하여 결과를 처리할 수 있습니다.

Promise의 기본 개념

Promise는 세 가지 상태를 가집니다.

대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다.
이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
거부(rejected): 비동기 작업이 실패한 상태입니다.

Promise 객체는 다음과 같은 형식으로 생성할 수 있습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 진행
  // 성공한 경우 resolve() 호출
  // 실패한 경우 reject() 호출
});

Promise의 사용 예시

아래는 자바스크립트 Promise 객체를 사용하여 비동기적으로 데이터를 가져오는 예시입니다. 먼저, getData() 함수를 정의합니다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data); // 데이터를 가져온 후 resolve 호출
    }, 2000);
  });
}

위에서 정의한 getData() 함수는 2초 후에 ‘Hello, World!’라는 데이터를 가져오도록 구현되어 있습니다. 이제 이 함수를 호출하고 결과를 처리하는 방법을 알아보겠습니다.

getData()
  .then((result) => {
    console.log(result);
    // 'Hello, World!' 출력
  })
  .catch((error) => {
    console.error(error);
  });

getData() 함수를 호출하면 Promise 객체가 반환됩니다. 이 Promise 객체의 then() 메소드를 호출하여 성공적인 경우 데이터를 처리하고, catch() 메소드를 호출하여 실패한 경우 오류를 처리할 수 있습니다.

Promise 체이닝

Promise 객체는 체이닝을 통해 여러 개의 비동기 작업을 순차적으로 실행할 수 있습니다. 이때, 이전 작업의 결과를 다음 작업으로 전달할 수 있습니다.

getData()
  .then((result) => {
    console.log(result);
    return getMoreData(result); // 이전 작업 결과를 다음 작업으로 전달
  })
  .then((moreData) => {
    console.log(moreData);
  })
  .catch((error) => {
    console.error(error);
  });

위 예시에서는 getData() 함수로 가져온 데이터를 getMoreData() 함수에 전달하여 더 많은 데이터를 가져오도록 구현되어 있습니다. 이런식으로 Promise 체이닝을 통해 복잡한 비동기 작업도 간단하게 처리할 수 있습니다.

결론

자바스크립트 Promise 객체는 비동기 처리를 효율적으로 다루기 위한 강력한 도구입니다. Promise를 사용하면 비동기 작업을 순차적으로 처리하고 작업 간의 의존성을 관리할 수 있습니다. 이를 통해 웹 애플리케이션의 성능을 개선하고 사용자 경험을 향상시킬 수 있습니다.