소개

Axios는 클라이언트 측에서 HTTP 요청을 보낼 수 있는 JavaScript 라이브러리입니다. 이를 사용하여 다양한 방식으로 데이터를 가져올 수 있습니다. 이번 글에서는 Axios를 사용하여 클라이언트 측에서 여러 개의 데이터 소스를 가져와 병합하는 방법에 대해 알아보겠습니다.

데이터 병합하기

여러 개의 서버 또는 API에서 데이터를 가져와야 할 때, Axios를 사용하여 각각의 요청을 보낼 수 있습니다. 그리고 Promise.all() 메서드를 사용하여 모든 요청이 완료될 때까지 기다린 후에 데이터를 병합할 수 있습니다.

const axios = require('axios');

const apiUrl1 = 'https://api.example.com/data1';
const apiUrl2 = 'https://api.example.com/data2';

const fetchData = async () => {
  const [response1, response2] = await Promise.all([
    axios.get(apiUrl1),
    axios.get(apiUrl2),
  ]);

  const data1 = response1.data;
  const data2 = response2.data;

  const mergedData = {
    ...data1,
    ...data2,
  };

  return mergedData;
};

fetchData()
  .then((mergedData) => {
    console.log(mergedData);
  })
  .catch((error) => {
    console.error(error);
  });

위의 코드에서는 두 개의 API 엔드포인트인 apiUrl1과 apiUrl2에서 데이터를 가져오고 있습니다. Promise.all()을 사용하여 두 개의 요청이 모두 완료될 때까지 기다린 후, response1과 response2로부터 데이터를 추출합니다. 추출한 데이터를 mergedData라는 객체에 병합합니다. 이후에 병합된 데이터를 사용하거나 출력하는 등의 작업을 수행할 수 있습니다.

결론

Axios는 클라이언트 측에서 쉽게 HTTP 요청을 처리할 수 있는 강력한 라이브러리입니다. 여러 개의 데이터 소스에서 데이터를 가져와 병합해야 할 때, Promise.all()과 함께 사용하여 데이터를 효율적으로 처리할 수 있습니다. Axios를 활용하여 다양한 클라이언트 측 데이터 처리 작업을 수행해보세요!

참고 자료

• Axios 공식 문서
• JavaScript Promise.all() 메서드

#axios #javascript