[javascript] Promise를 사용한 비동기 데이터 요청

11 Dec 2023

javascript

JavaScript에서 비동기 데이터 요청을 다루는 방법 중 하나는 Promise를 사용하는 것입니다. Promise를 사용하면 데이터 요청 결과를 처리하는 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다. 이 글에서는 JavaScript에서 Promise를 사용하여 비동기 데이터를 요청하고 처리하는 방법에 대해 알아보겠습니다.

Promise란 무엇인가요?

Promise는 비동기 작업의 완료 또는 실패와 같은 결과를 나타내는 JavaScript 객체입니다. Promise 객체는 작업이 완료될 때까지 기다릴 수 있고, 작업이 성공 또는 실패한 후에 처리할 코드를 지정할 수 있습니다.

Promise를 사용한 데이터 요청 예시

아래는 Promise를 사용하여 XMLHttpRequest를 이용해 서버로부터 데이터를 요청하는 예시 코드입니다.

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('데이터를 불러오는 데 실패했습니다.'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('네트워크 에러가 발생했습니다.'));
    };
    xhr.send();
  });
}

fetchData('https://example.com/data')
  .then(data => {
    console.log('데이터를 성공적으로 불러왔습니다:', data);
  })
  .catch(error => {
    console.error('데이터 요청 중 오류 발생:', error);
  });

위 예시 코드에서는 fetchData 함수를 정의하고, 해당 함수는 Promise를 반환합니다. 서버로부터 데이터를 성공적으로 받아오면 resolve를 호출하고, 실패할 경우 reject를 호출합니다. 이후에는 then과 catch를 사용하여 Promise가 성공하거나 실패한 후에 처리할 코드를 지정합니다.

JavaScript에서 Promise를 사용하면 좀 더 보기 좋고 유지보수 가능한 비동기 코드를 작성할 수 있습니다.

참고 자료

MDN web docs - Using promises
[Promise - JavaScript MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)