240612 TIL

Axios란?

Axios는 브라우저와 Node.js를 위한 HTTP 클라이언트입니다. 비동기 HTTP 요청을 쉽고 간편하게 처리할 수 있게 해주는 라이브러리입니다. 주로 REST API와 통신할 때 많이 사용됩니다.

주요 특징

1. Promise 기반: Axios는 Promise 기반으로 비동기 처리를 쉽게 할 수 있습니다.
2. 인터셉터: 요청이나 응답을 가로채서 처리할 수 있습니다.
3. 자동 JSON 변환: JSON 데이터를 자동으로 변환해줍니다.
4. CSRF 보호: XSRF 보호 기능을 제공합니다.
5. 취소 기능: 요청을 취소할 수 있습니다.
6. 브라우저와 Node.js에서 모두 사용 가능: Axios는 브라우저와 Node.js 환경 모두에서 동작합니다.

설치 및 기본 사용법

설치

npm을 이용해 Axios를 설치할 수 있습니다.

npm install axios

혹은 Yarn을 이용할 수도 있습니다.

yarn add axios

기본 사용법

Axios를 이용해 GET 요청을 보내는 예제입니다.

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

POST 요청의 예제입니다.

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

인터셉터

Axios의 인터셉터를 사용하면 요청 또는 응답을 가로채서 처리할 수 있습니다. 다음은 요청 인터셉터를 설정하는 예제입니다.

axios.interceptors.request.use(
  config => {
    // 요청을 보내기 전에 할 작업
    console.log('Request sent', config);
    return config;
  },
  error => {
    // 요청 에러가 발생했을 때 할 작업
    return Promise.reject(error);
  }
);

응답 인터셉터는 다음과 같이 설정할 수 있습니다.

axios.interceptors.response.use(
  response => {
    // 응답 데이터를 가공할 수 있습니다.
    console.log('Response received', response);
    return response;
  },
  error => {
    // 응답 에러가 발생했을 때 할 작업
    return Promise.reject(error);
  }
);

결론

오늘은 Axios에 대해 간단히 살펴보았습니다. Axios는 HTTP 요청을 보다 쉽게 처리할 수 있게 도와주는 매우 유용한 라이브러리입니다. Promise 기반으로 비동기 작업을 다루기 쉽고, 인터셉터를 통해 요청과 응답을 유연하게 처리할 수 있는 점이 큰 장점입니다.