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를 적극 활용하는 것을 권장합니다.
참고문서:
- Axios 공식 문서: https://axios-http.com/
- MDN 웹 문서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises