[NEXT.JS] Axios

개요

Axios는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있는 도구입니다. 주로 비동기 HTTP 요청을 쉽게 관리하고 처리하는 데 사용됩니다.

 

 

특징

Promise 기반

Axios는 Promise API를 사용하여 비동기 요청을 처리합니다.

이를 통해 콜백 헬(callback hell)을 피하고, 비동기 코드를 더 읽기 쉽게 작성할 수 있습니다.

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

 

인터셉터 (Interceptors)

요청(request) 또는 응답(response)이 처리되기 전에 특정 작업을 수행할 수 있도록 하는 인터셉터 기능을 제공합니다.

이를 통해 요청 전 인증 토큰을 추가하거나, 응답 에러를 공통으로 처리하는 등의 작업이 가능합니다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  // 요청 전에 작업 수행
  config.headers.Authorization = `Bearer ${token}`;
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  // 응답 데이터 처리
  return response;
}, error => {
  // 응답 에러 처리
  return Promise.reject(error);
});

 

자동 JSON 데이터 변환

Axios는 JSON 데이터를 자동으로 변환하여 요청 본문에 추가하거나, 응답 데이터를 파싱합니다.

이는 서버와의 데이터 통신을 더 쉽게 만들어 줍니다.

axios.post('/api/data', {
  name: 'John Doe',
  age: 30
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

 

취소 토큰 (Cancel Token)

Axios는 요청을 취소할 수 있는 기능을 제공합니다. 이는 사용자가 여러 번 요청을 보낼 때, 이전 요청을 취소하고 새로운 요청을 처리할 때 유용합니다.

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 요청 취소
source.cancel('Operation canceled by the user.');

 

타임아웃 설정 및 기본값 구성

Axios는 요청에 대한 타임아웃을 설정할 수 있으며, 기본적으로 적용될 설정값을 정의할 수 있습니다.

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.timeout = 2500;

 

 

사용 예시

설치

npm install axios

 

사용

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const FetchData = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default FetchData;

 

 

문의사항이나 피드백은 댓글로 남겨주세요.