[React]axios

axios란🤔

http를 이용해서 서버와 통신하기 위해 사용하는 패키지

 

axios 사용

c - 생성

const onSubmitHandler = async(todo) => {
   await axios.post("http://localhost:4000/todos", todo);
};

r - 읽기

const { data } = await axios.get("http://localhost:4000/todos");

u - ✔️patch(변경하는 항목만 바꿔줌) / put(이전 데이터를 무시하고, 덮어씌움)

const onClickEditButtonHandler = (todoId, edit) => {
   axios.patch(`http://localhost:4000/todos/${todoId}`, edit);
};

d - 삭제

const onClickDeleteButtonHandler = (todoId) => {
   axios.delete(`http://localhost:4000/todos/${todoId}`);
};

 

axios custom instance

axios 커스텀 설정 가능 => baseUrl이나 공통 헤더를 한번에 변경가능

const api = axios.create({
  baseURL: "http://localhost:4000",
});

axios interceptor

Axios 요청(request)이나 응답(response)에 작업을 추가하거나 수정할 수 있는 기능

👇 주로 다음과 같을때 사용👇

 

• 인증 토큰 추가: 모든 요청 헤더에 JWT 토큰 등 인증 정보를 자동으로 추가.
• 에러 처리: 응답 에러를 통합적으로 처리(예: 401 에러 발생 시 로그아웃).
• 로딩 표시: 요청 전후에 로딩 상태 관리.
• 데이터 변환: 응답 데이터를 공통 포맷으로 변환.

 

import axios from 'axios';

// Axios 인스턴스 생성
const api = axios.create({
  baseURL: 'https://api.example.com',
});

// 요청 인터셉터
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 토큰 추가
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 응답 인터셉터
api.interceptors.response.use(
  (response) => response, // 응답 그대로 반환
  (error) => {
    if (error.response.status === 401) {
      alert('인증이 만료되었습니다. 다시 로그인하세요.');
      // 로그아웃 처리 또는 리다이렉트
    }
    return Promise.reject(error);
  }
);

export default api;

fetch vs axios

• 기본 설정 가능 : 기본 url, 시간등

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

• 안토샙터 : 전처리, 후처리 가능
• 에러핸들링 : fetch는 네트워크 오류만 전달