Axios로 여러 요청을 만드는 방법

안녕하세요! 개발자라면 프로젝트에서 여러 API 호출을 해야 할 때가 있었을 것입니다. 코드의 가장 화려한 부분은 아니지만, 필수적입니다. 오늘은 이 작업을 효율적으로 처리하는 강력한 방법인 Axios 여러 요청에 대해 깊이 파고들어 보겠습니다.

하지만 시작하기 전에, 간단한 팁 하나 드릴게요: 개발 프로세스를 간소화할 수 있는 강력한 API 도구를 찾고 있다면, Apidog를 확인해 보세요. 무료이며, 여러분의 삶을 훨씬 더 쉽게 만들어 줄 많은 기능이 포함되어 있습니다.

이제 소매를 걷어 올리고 Axios로 여러 요청을 만드는 세부사항으로 들어가 보겠습니다!

Axios란 무엇인가요?

첫째로, Axios가 무엇인지 이야기해 보겠습니다. Axios는 JavaScript를 위한 인기 있는 Promise 기반 HTTP 클라이언트입니다. 브라우저와 Node.js에서 HTTP 요청을 하는 데 사용되며, 사용의 용이성과 유연성으로 특히 인기를 끌고 있습니다. Axios를 사용하면 비동기 HTTP 요청을 REST 엔드포인트에 쉽게 보내고 CRUD 작업을 수행할 수 있습니다.

왜 Axios를 여러 요청에 사용해야 할까요?

모던 웹 애플리케이션을 구축할 때, 여러 소스에서 데이터를 가져와야 하는 경우가 종종 있습니다. 이는 다양한 데이터 집합으로 대시보드를 채우거나, 일련의 종속 작업을 수행하거나, 단일 페이지를 표시하기 위해 필요한 모든 정보를 수집하기 위한 것일 수 있습니다.

여러 API 요청을 처리하는 것은 까다로울 수 있습니다. 여러 비동기 작업을 관리하고, 오류를 우아하게 처리하며, 애플리케이션이 느려지지 않도록 해야 합니다. 여기서 Axios의 강점이 발휘됩니다. 여러 요청을 관리하는 우아하고 간단한 방법을 제공하며, 다음과 같은 기능이 포함되어 있습니다:

Promise 기반 API: 비동기 요청 처리를 쉽게 해줍니다.
동시 요청 지원: axios.all 및 axios.spread 사용.
인터셉터: 요청 및 응답 변환을 처리합니다.
오류 처리: 다양한 유형의 오류 관리를 간소화합니다.

Axios 시작하기

여러 요청을 dive하기 전에, Axios의 기본 사항에 대해 이해하고 있는지 확인합시다.

Axios 설치하기

먼저 Axios를 설치해야 합니다. npm을 사용하고 있다면, 다음과 같이 할 수 있습니다:

npm install axios

혹은, yarn을 선호하는 경우:

yarn add axios

기본 Axios 요청

다음은 Axios를 사용한 기본 GET 요청의 간단한 예입니다:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('데이터 가져오기에 오류 발생:', error);
  });

이 간단한 코드 조각은 주어진 URL에서 데이터를 가져오고 콘솔에 로그를 출력합니다. 오류가 발생하면 오류 메시지를 로그에 남깁니다.

Axios로 여러 요청 만들기

이제 본 주제인 Axios로 여러 요청 만들기로 넘어가 보겠습니다. 필요에 따라 이를 처리하는 여러 가지 방법이 있습니다.

`axios.all` 및 `axios.spread` 사용하기

여러 요청을 처리하는 가장 일반적인 방법은 axios.all 및 axios.spread를 사용하는 것입니다. 이러한 기능은 동시 요청을 관리하고 응답을 깔끔하고 조직적으로 처리하는 데 도움을 줍니다.

다음은 예입니다:

import axios from 'axios';

function getData() {
  const requestOne = axios.get('https://api.example.com/data1');
  const requestTwo = axios.get('https://api.example.com/data2');

  axios.all([requestOne, requestTwo])
    .then(axios.spread((responseOne, responseTwo) => {
      console.log('첫 번째 요청에서 받은 데이터:', responseOne.data);
      console.log('두 번째 요청에서 받은 데이터:', responseTwo.data);
    }))
    .catch(errors => {
      console.error('데이터 가져오기에 오류 발생:', errors);
    });
}

getData();

이 예제에서 axios.all은 프로미스 배열(우리의 HTTP 요청)을 받아 모든 요청이 처리될 때까지 기다립니다. 그런 다음 axios.spread 함수가 응답을 개별 인수로 펼쳐 각 응답을 쉽게 다룰 수 있도록 합니다.

동적 요청 처리하기

때때로 몇 개의 요청을 만들어야 할지 미리 알 수 없는 경우가 있습니다. 이러한 경우 프로미스 배열을 동적으로 생성할 수 있습니다.

import axios from 'axios';

function fetchData(endpoints) {
  const requests = endpoints.map(endpoint => axios.get(endpoint));

  axios.all(requests)
    .then(axios.spread((...responses) => {
      responses.forEach((response, index) => {
        console.log(`요청 ${index + 1}에서 받은 데이터:`, response.data);
      });
    }))
    .catch(errors => {
      console.error('데이터 가져오기에 오류 발생:', errors);
    });
}

const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchData(apiEndpoints);

이 시나리오에서는 엔드포인트 배열을 가져와 프로미스 배열을 생성합니다. 이는 동적 API 호출 목록을 처리하는 강력한 방법입니다.

Axios를 사용한 순차 요청

때때로 첫 번째 요청이 완료된 후에만 다음 요청을 시작해야 하는 경우도 있습니다. 예를 들어, 두 번째 요청이 첫 번째 요청의 결과에 의존하는 경우입니다. 이러한 경우 프로미스를 사용하여 요청을 연결할 수 있습니다.

import axios from 'axios';

function fetchSequentialData() {
  axios.get('https://api.example.com/data1')
    .then(response1 => {
      console.log('첫 번째 요청 데이터:', response1.data);
      return axios.get('https://api.example.com/data2');
    })
    .then(response2 => {
      console.log('두 번째 요청 데이터:', response2.data);
    })
    .catch(error => {
      console.error('데이터 가져오기에 오류 발생:', error);
    });
}

fetchSequentialData();

이 접근 방식은 첫 번째 요청이 성공적으로 완료된 이후에만 두 번째 요청이 시작되도록 보장합니다.

여러 요청에서의 오류 처리

여러 요청을 처리할 때 오류를 효과적으로 다루는 것이 중요합니다. Axios는 여러 가지 방법으로 오류를 관리할 수 있도록 하여 애플리케이션이 문제를 우아하게 처리할 수 있게 합니다.

개별 요청에 대한 오류 잡기

각 요청에 대해 개별적으로 오류를 처리하려면 각 프로미스에 .catch 블록을 추가하면 됩니다:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1')
  .catch(error => console.error('첫 번째 요청에서 오류 발생:', error));

const requestTwo = axios.get('https://api.example.com/data2')
  .catch(error => console.error('두 번째 요청에서 오류 발생:', error));

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    if (responseOne) console.log('첫 번째 요청에서 받은 데이터:', responseOne.data);
    if (responseTwo) console.log('두 번째 요청에서 받은 데이터:', responseTwo.data);
  }));

모든 오류 한 번에 잡기

또는 끝에서 모든 오류를 함께 잡을 수도 있습니다:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    console.log('첫 번째 요청에서 받은 데이터:', responseOne.data);
    console.log('두 번째 요청에서 받은 데이터:', responseTwo.data);
  }))
  .catch(error => {
    console.error('데이터 가져오기에 오류 발생:', error);
  });

이 접근 방식은 더 간단하지만 덜 정밀하여 어떤 요청이 실패했는지 구별하지 않습니다.

Axios 요청 최적화하기

Axios를 최대한 활용하기 위한 몇 가지 팁과 모범 사례가 있습니다.

인터셉터 사용하기

인터셉터를 사용하면 요청 및 응답이 then 또는 catch로 처리되기 전에 코드를 실행하거나 요청/응답을 수정할 수 있습니다. 헤더 추가, 로깅, 오류 처리 등 여러 용도로 사용할 수 있습니다.

import axios from 'axios';

// 요청 인터셉터 추가
axios.interceptors.request.use(request => {
  console.log('요청 시작', request);
  return request;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터 추가
axios.interceptors.response.use(response => {
  console.log('응답:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

전역 기본값 설정하기

Axios에 대한 기본 구성 옵션을 설정할 수 있습니다. 이는 기본 URL, 헤더, 시간 초과 등을 설정하는 데 유용합니다.

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

요청 취소하기

가끔 요청을 취소해야 할 필요가 있을 수 있습니다. Axios는 CancelToken을 사용하여 요청을 취소하는 방법을 제공합니다.

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('요청이 취소되었습니다', thrown.message);
    } else {
      console.error('데이터 가져오기에 오류 발생:', thrown);
    }
  });

// 요청 취소하기
cancel('사용자에 의해 작업이 취소되었습니다.');

실제 예제: 여러 API에서 데이터 가져오기

실제 예제를 통해 모든 것을 통합해 보겠습니다. 사용자 데이터, 게시물 및 댓글을 다양한 엔드포인트에서 가져와야 하는 대시보드를 구축하고 있다고 가정해 보겠습니다.

import axios from 'axios';

async function fetchDashboardData() {
  try {
    const [userData, postsData, commentsData] = await axios.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/posts'),
      axios.get('https://api.example.com/comments')
    ]);

    console.log('사용자 데이터:', userData.data);
    console.log('게시물 데이터:', postsData.data);
    console.log('댓글 데이터:', commentsData.data);
  } catch (errors) {
    console.error('대시보드 데이터 가져오기에 오류 발생:', errors);
  }
}

fetchDashboardData();

이 예제에서는 axios.all을 사용하여 세 가지 서로 다른 엔드포인트에서 데이터를 동시에 가져옵니다. 그런 다음 응답을 함께 처리하여 데이터를 콘솔에 로그합니다.

Apidog: Axios 코드를 생성하는 무료 도구

Apidog는 강력한 협업 API 개발 플랫폼으로, API 설계, 디버깅, 테스트, 게시 및 목업을 위한 종합 툴킷을 제공합니다. Apidog를 사용하면 HTTP 요청을 만들기 위한 Axios 코드를 자동으로 생성할 수 있습니다.

button

Axios 코드를 생성하는 과정은 다음과 같습니다:

1단계: Apidog를 열고 새로운 요청을 선택합니다.

2단계: 요청을 보내고 싶은 API 엔드포인트의 URL을 입력하고, 요청에 포함하고 싶음 헤더나 쿼리 문자열 매개변수를 입력한 다음, "디자인"을 클릭하여 Apidog의 디자인 인터페이스로 전환합니다.

3단계: "클라이언트 코드 생성"을 선택하여 코드를 생성합니다.

4단계: 생성된 Axios 코드를 복사하여 프로젝트에 붙여넣습니다.

HTTP 요청을 보내기 위해 Apidog 사용하기

Apidog는 HTTP 요청을 테스트할 수 있는 능력을 더욱 향상시키는 여러 가지 고급 기능을 제공합니다. 이러한 기능을 통해 요청을 사용자화하고 더 복잡한 시나리오를 손쉽게 처리할 수 있습니다.