axios multi request

회사에서 useAxios를 사용하던 중 한 컴포넌트에서 2개의 데이터를 받아야 하는 경우가 생겨 multi request를 진행하게 되었습니다.

공식문서 예시

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

axios.all?

axios.all은 동시 요청을 처리하기 위해 Axios에 내장된 메서드입니다. 여러 HTTP요청을 개별적으로 만드는 대신, axios.all 메서드를 사용하면 엔드포인트에 대한 여러 HTTP 요청을 함께 만들 수 있습니다.

axios.all 함수는 JavaScript 배열과 같은 프로미스(iterable)를 인자로 받고, 각 프로미스의 결과를 담은 배열을 반환합니다. 즉, axios.all 함수는 여러 개의 프로미스를 병렬로 실행하고, 모든 프로미스의 결과가 반환될 때까지 기다린 뒤 그 결과를 하나의 배열로 반환하는 함수입니다.

사용했던 코드

import axios, { AxiosError, AxiosResponse } from "axios";
import { useEffect, useState } from "react";

import { axiosInstance } from "./index";

export const getMultiDatas = () => {
  const [data1, setData1] = useState<AxiosResponse | any | unknown>();
  const [data2, setData2] = useState<AxiosResponse | any | unknown>();
  const [error, setError] = useState<AxiosError | any | unknown>(null);
  const [loading, setLoading] = useState(true);

  const endPoints = [
    "http://host.com/api/data1",
    "http://host.com/api/data2",
  ];

  const axiosDatas = async () => {
    try {
      const response = await axios.all(
        endPoints.map((endPoint) => axiosInstance.get(endPoint))
      );
      setData1(response[0]);
      setData2(response[1]);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    axiosDatas();
  }, []);

  return { data1, data2, error, loading };
};

const App = () => {  
	const { data1, data2, error, loading } = getMultiDatas();

  return (
	<div>
      {loading ? (
        <div>loading...</div>
      ) : error ? (
        <div>error</div>
      ) : (
        <div>{data1}</div>
        <div>{data2}</div>
      )}
    </div>
    )
}

reference
https://axios-http.com/kr/docs/post_example
https://blog.logrocket.com/using-axios-all-make-concurrent-requests/