Axios

Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다. 주로 API와의 통신을 쉽게 구현하기 위해 사용되며, RESTful API와 상호작용하는 작업에서 자주 사용됩니다. React, Vue, Angular 등 여러 프레임워크에서 널리 사용되고 있습니다.

주요 기능

Axios의 주요 기능은 다음과 같습니다:

1. HTTP 요청:
   • GET, POST, PUT, DELETE, PATCH와 같은 HTTP 요청을 쉽게 보낼 수 있습니다.
2. Promise 기반:
   • async/await 구문을 통해 비동기 요청을 간단히 다룰 수 있습니다.
3. 자동 JSON 데이터 변환:
   • 요청 본문이나 응답 데이터를 JSON으로 자동 변환하므로, JSON.stringify나 JSON.parse를 직접 호출하지 않아도 됩니다.
4. 요청 및 응답 인터셉터:
   • 요청이나 응답을 가로채는 인터셉터 기능을 제공합니다. 이를 통해 요청 전에 헤더를 추가하거나, 응답 후 오류 처리를 일괄적으로 관리할 수 있습니다.
5. 타임아웃 설정 및 취소 기능:
   • 요청 시간 초과 설정이 가능하고, 필요 시 요청을 취소할 수도 있습니다.
6. 크로스 브라우저 지원:
   • 현대 브라우저와 오래된 브라우저에서도 잘 동작합니다.

간단한 사용 예제

Axios로 데이터를 요청하고, 서버로부터 응답을 받는 예제입니다.

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data); // 응답 데이터 출력
  } catch (error) {
    console.error('Error fetching data:', error); // 오류 처리
  }
}

fetchData();

주요 메서드 예시

• GET 요청:

  axios.get('/api/user/12345');

• POST 요청:

  axios.post('/api/user', {
    name: 'John Doe',
    age: 30
  });

• 요청 취소:

  const source = axios.CancelToken.source();
  axios.get('/api/user', { cancelToken: source.token });
  source.cancel('요청 취소');

Axios와 Fetch API 비교

• 구현 편의성: Axios는 기본적으로 JSON으로 자동 변환해주고, 인터셉터 등을 제공해 Fetch보다 편리한 기능이 많습니다.
• 오래된 브라우저 지원: Axios는 IE와 같은 구형 브라우저 지원이 더 잘 이루어집니다.
• 에러 처리: Axios는 요청 실패 시 HTTP 상태 코드를 포함한 오류를 쉽게 다룰 수 있게 해줍니다.

Axios는 전반적으로 안정적이고 유연한 HTTP 클라이언트로, 특히 API 호출과 데이터 통신이 중요한 웹 애플리케이션에서 유용하게 사용할 수 있습니다.