Promise를 사용해 서버 API와의 비동기 통신 구현하기

13 Sep 2023

Promise

서버 API와의 비동기 통신은 웹 개발에서 흔히 사용되는 기술입니다. 이러한 통신을 구현할 때 Promise를 사용하면 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 Promise를 사용하여 서버 API와의 비동기 통신을 구현하는 방법에 대해 알아보겠습니다.

Promise란?

Promise는 자바스크립트에서 비동기 작업을 다루기 위한 객체입니다. 비동기 작업이 완료되었을 때 결과를 반환하거나 에러를 처리하는 방식을 표준화하여 코드의 가독성과 유지보수성을 높일 수 있습니다.

서버 API와의 비동기 통신 구현하기

서버 API와의 비동기 통신을 구현하기 위해서는 다음과 같은 단계를 따를 수 있습니다:

XMLHttpRequest 객체를 사용하여 서버에 요청을 보냅니다.

const xhr = new XMLHttpRequest();

// 요청이 완료되었을 때의 이벤트 핸들러를 작성합니다.
xhr.onload = function() {
  if (xhr.status === 200) {
    // 서버 응답이 성공한 경우 처리할 로직을 작성합니다.
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    // 서버 응답이 실패한 경우 처리할 로직을 작성합니다.
    console.error('서버 응답 실패');
  }
};

// 서버에 요청을 보냅니다.
xhr.open('GET', '/api/data', true);
xhr.send();

Promise 객체를 사용하여 비동기 작업을 처리합니다.

function getData() {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();

    xhr.onload = function() {
      if (xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        resolve(response);
      } else {
        reject('서버 응답 실패');
      }
    };

    xhr.open('GET', '/api/data', true);
    xhr.send();
  });
}

// 비동기 작업이 완료된 후 결과를 처리하는 방법
getData()
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });

위의 코드에서 getData() 함수는 Promise를 반환합니다. 이 함수를 호출하고 then 메서드와 catch 메서드로 비동기 작업이 완료된 후의 결과를 처리할 수 있습니다. resolve 메서드를 호출하면 then 메서드에서 결과를 받을 수 있고, reject 메서드를 호출하면 catch 메서드에서 에러를 받을 수 있습니다.

결론

Promise를 사용하여 서버 API와의 비동기 통신을 구현하면 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 비동기 작업이 완료된 후의 결과를 명시적으로 처리할 수 있기 때문에 코드의 구조를 더 명확하게 나타낼 수 있습니다. 서버 API와의 통신을 구현할 때는 Promise를 적극적으로 활용해보세요.

#WebDevelopment #AsyncProgramming