Axios를 사용하여 동시에 여러 개의 API 요청 보내기

Axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 비동기적으로 서버와 통신할 수 있는 기능을 제공합니다. Axios를 사용하면 여러 개의 API 요청을 동시에 보낼 수 있는데, 이는 프론트엔드나 백엔드 개발에서 매우 유용한 기능입니다.

여러 개의 API 요청을 동시에 보내려면, Axios의 axios.all() 또는 axios.spread() 메서드를 사용할 수 있습니다. axios.all()은 여러 개의 Axios 인스턴스를 배열로 받아 Promise 배열을 반환합니다. axios.spread() 메서드는 Promise 배열의 결과를 매개변수로 받아 결과를 개별적으로 처리할 수 있도록 해줍니다.

import axios from 'axios';

axios.all([
  axios.get('http://api.example.com/endpoint1'),
  axios.get('http://api.example.com/endpoint2'),
  axios.get('http://api.example.com/endpoint3')
])
.then(axios.spread((response1, response2, response3) => {
  // 개별적으로 처리할 로직 작성
  console.log(response1.data);
  console.log(response2.data);
  console.log(response3.data);
}))
.catch(error => {
  console.log(error);
});

위의 예제 코드에서는 axios.all() 메서드를 사용하여 세 개의 API 요청을 동시에 보내고 있습니다. 요청은 배열로 전달되며, 각 요청의 결과는 axios.spread() 메서드에서 개별적으로 처리됩니다. 이후에는 각각의 응답 데이터를 로그에 출력하고 있습니다.

이렇게 Axios를 사용하여 여러 개의 API 요청을 동시에 보낼 수 있기 때문에, 병렬로 요청을 처리하고 응답 시간을 줄일 수 있습니다. 따라서 프론트엔드나 백엔드 개발에서 효율적인 데이터 처리를 위해 Axios를 적극 활용하는 것을 권장합니다.


참고문서: