[javascript] AJAX 요청에서 프로미스 활용 방법

07 Dec 2023

javascript

AJAX는 웹 애플리케이션에서 비동기적으로 서버와 통신하기 위해 사용되는 기술입니다. 이전에는 콜백 함수를 사용하여 AJAX 요청의 결과를 처리했지만, 최근에는 프로미스를 사용하여 더 효율적으로 처리하는 방법이 제공되고 있습니다.

프로미스란?

프로미스는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 성공적으로 완료되면 프로미스는 성공 상태(resolve)를 반환하고, 실패하면 실패 상태(reject)를 반환합니다. 이러한 상태 변경은 프로미스 체이닝을 통해 처리할 수 있습니다.

AJAX 요청에서 프로미스 활용하기

AJAX 요청에서 프로미스를 활용하려면 다음과 같은 단계를 따를 수 있습니다:

XMLHttpRequest 객체를 생성합니다.
XMLHttpRequest 객체의 open 메서드로 요청을 설정합니다.
XMLHttpRequest 객체의 send 메서드로 요청을 전송합니다.
프로미스 객체를 반환하는 함수를 생성합니다.
resolve와 reject 함수를 매개변수로 가지는 함수를 작성합니다. 이 함수 내에서 AJAX 요청의 콜백 함수를 정의합니다.
AJAX 요청의 콜백 함수 내에서 resolve와 reject 함수를 호출하여 프로미스의 상태를 변경합니다.
프로미스 객체를 반환합니다.

아래는 이러한 방법을 사용하여 AJAX 요청을 처리하는 예제 코드입니다:

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.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

// AJAX 요청 호출 예시
makeAjaxRequest('https://api.example.com/data')
  .then(response => {
    console.log('요청에 성공하였습니다: ', response);
  })
  .catch(error => {
    console.error('요청에 실패하였습니다: ', error);
  });

위의 코드에서는 makeAjaxRequest 함수가 프로미스 객체를 반환하도록 구현되어 있습니다. 그리고 반환된 프로미스 객체의 then 메서드와 catch 메서드를 활용하여 성공 및 실패 콜백을 처리합니다.

위의 예제는 간단한 GET 요청을 보내는 방법을 보여줍니다. POST, PUT 또는 DELETE 같은 다른 유형의 요청을 보내는 방법도 비슷하게 구현할 수 있습니다.

결론

AJAX 요청에서 프로미스를 활용하면 비동기 작업을 보다 효율적으로 처리할 수 있습니다. 프로미스를 사용하면 코드가 더 간결해지고 가독성이 향상되며, 오류 처리도 용이해집니다. 따라서 프로미스를 사용하여 AJAX 요청을 처리하는 것이 좋은 방법입니다.

프로미스란?

AJAX 요청에서 프로미스 활용하기

결론

참고 자료