[javascript] 비동기 데이터 요청을 이용한 도서 정보 검색

11 Dec 2023

javascript

도서 정보를 검색하고 표시하는 웹 애플리케이션을 개발하려고 합니다. 도서 정보를 가져오는 동안 사용자는 다른 작업을 할 수 있어야 합니다. 이를 위해 비동기 데이터 요청을 사용하여 데이터를 가져오고 표시하는 방법에 대해 알아보겠습니다.

XMLHttpRequest를 이용한 비동기 데이터 요청

JavaScript에서 비동기 데이터 요청을 처리하는 방법 중 하나는 XMLHttpRequest 객체를 사용하는 것입니다. 아래는 XMLHttpRequest를 사용하여 서버에서 도서 정보를 가져오는 예제입니다.

const xhr = new XMLHttpRequest();
const url = 'https://api.example.com/books?q=javascript';

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      // 도서 정보를 표시하는 함수 호출
      displayBooks(response);
    } else {
      // 오류 처리
      console.error('Failed to fetch book data');
    }
  }
};

xhr.open('GET', url, true);
xhr.send();

위 코드에서 XMLHttpRequest 객체를 사용하여 서버에 GET 요청을 보내고, 응답을 받은 후 적절한 처리를 합니다.

Fetch API를 이용한 비동기 데이터 요청

최신 웹 표준에서는 XMLHttpRequest 대신 Fetch API를 사용하여 비동기 데이터 요청을 처리하는 것을 권장하고 있습니다. 아래는 Fetch API를 사용하여 동일한 도서 정보를 가져오는 예제입니다.

const url = 'https://api.example.com/books?q=javascript';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to fetch book data');
    }
    return response.json();
  })
  .then(data => {
    // 도서 정보를 표시하는 함수 호출
    displayBooks(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error.message);
  });

Fetch API를 이용하면 간편하게 데이터를 가져올 수 있으며, Promise를 기반으로 비동기 처리를 수행합니다.

결론

웹 애플리케이션에서 비동기 데이터 요청을 통해 도서 정보를 가져오고 표시하는 방법을 알아보았습니다. XMLHttpRequest나 Fetch API를 사용하여 서버와의 통신을 처리할 수 있으며, 이를 통해 사용자는 다른 작업을 하면서도 도서 정보를 기다리지 않고 볼 수 있습니다.

이러한 방법을 통해 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.