Promise는 JavaScript에서 비동기식 작업을 처리하는 데 사용되는 객체입니다. AJAX 호출과 함께 Promise를 사용하면 비동기 작업을 더욱 간편하고 가독성 좋게 처리할 수 있습니다. 이번 글에서는 Promise와 함께 AJAX 호출을 어떻게 처리하는지 알아보겠습니다.

AJAX 호출 설정하기

먼저, AJAX 호출을 설정하는 방법부터 살펴보겠습니다. 아래의 예제 코드는 fetch 함수를 사용하여 AJAX 호출을 설정하는 방법입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

이 코드는 fetch 함수를 사용하여 https://api.example.com/data URL로 AJAX 호출을 보냅니다. then 메서드를 사용하여 반환된 응답을 JSON 형식으로 변환하고, 다음 then 메서드를 사용하여 JSON 데이터를 처리합니다. catch 메서드는 에러 발생 시 처리할 함수를 지정합니다.

Promise와 함께 AJAX 호출 처리하기

이번에는 Promise와 함께 AJAX 호출을 처리하는 방법을 알아보겠습니다. Promise를 사용하여 코드를 간결하게 작성할 수 있습니다.

function makeAjaxRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(Error("Network Error"));
    };
    xhr.send();
  });
}

makeAjaxRequest('https://api.example.com/data')
  .then(response => console.log(response))
  .catch(error => console.log(error));

위의 코드에서 makeAjaxRequest 함수는 Promise 객체를 반환합니다. AJAX 호출을 처리하는 동안 발생한 성공 및 실패 상태를 resolve와 reject 함수로 전달합니다. 이후 then 및 catch 메서드를 사용하여 성공 및 실패 시 어떻게 처리할지 정의합니다.

이제 Promise와 함께 AJAX 호출을 처리하는 방법에 대해 알게 되었습니다. Promise를 사용하면 비동기 작업을 더욱 편리하게 처리할 수 있으며, 코드의 가독성을 향상시킬 수 있습니다. 이러한 기술은 프론트엔드 개발에서 자주 사용되므로, 앞으로 프로젝트에서 활용해 볼 만한 가치가 있습니다.

#JavaScript #AJAX #Promise