Axios Instance, Interceptor

Axios Instance

• Axios Instance는 Axios 라이브러리에서 제공하는 개념 중 하나. Axios는 HTTP 클라이언트 라이브러리로, 서버와의 HTTP 요청을 간편하게 만들어주는 도구이며, Axios Instance는 Axios를 사용할 때 특정한 설정이나 기본값을 가진 독립적인 인스턴스를 생성하는 방법을 제공한다.

• 일반적으로 Axios를 사용할 때, 전역으로 기본 설정을 하나만 사용하는 것이 아니라 여러 상황에서 다양한 설정을 사용해야 할 경우가 있다. 이런 경우에 Axios Instance를 사용하면 특정 설정이나 기본값을 가진 독립적인 인스턴스를 생성할 수 있다.

생성

import axios from 'axios';

// Axios Instance 생성
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'Authorization': 'Bearer TOKEN'}
});

// 이제 instance를 사용하여 HTTP 요청을 보낼 수 있습니다.
instance.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

사용

const apiInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

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

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

Axios Interceptor

Axios interceptor는 특정 상황에서 흐름을 가로 채서 어떠한 코드 상의 관여를 할 수 있게 한다.

• 요청(request)이 처리되기 전(http request가 서버에 전달되기 전)
• 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전
  

쓰이는 용도

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링
  등등..

사용

import axios from "axios";

const instance = axios.create({
    baseURL: process.env.REACT_APP_SERVER_URL,
});


instance.interceptors.request.use(

    // 요청을 보내기 전 수행되는 함수
    function(){},

    // 오류 요청을 보내기 전 수행되는 함수
    function(){},
)

instance.interceptors.response.use(

    // 응답을 내보내기 전 수행되는 함수
    function(){},

    // 오류응답을 내보내기 전 수행되는 함수
    function(){},
)

export default instance

사용하기

.env

REACT_APP_SERVER_URL=http://localhost:4000

api.js

import axios from "axios";

const instance = axios.create({
    baseURL: process.env.REACT_APP_SERVER_URL,
});

export default instance

App.jsx

import React, { useEffect, useState } from 'react'
import api from "./axios/api";
import axios from 'axios'

function App() {
  useEffect(() => {
    fetchTodo();
  }, [])
  const [todos, setTodos] = useState(null);
  const [todo, setTodo] = useState({
    title: "",
  })
  const [targetId, setTargetId] = useState("");
  const [editText, setEditText] = useState("");

  const fetchTodo = async () =>{
    const todoList = await api.get(
        "/todos"
      );
    setTodos(todoList.data);
    setTodo({
      title: "",
    })
    setTargetId("");
    setEditText("");
    return todoList.data
  }

  const onSubmitHandler = async () => {
    await api.post('/todos', todo)
    fetchTodo()
  }

  const onDeleteHandler = async (id) =>{
    await api.delete(`/todos/${id}`)
    fetchTodo()
  }

  const onUpdateHandler = async () => {
    await api.patch(`/todos/${targetId}`, {title: editText});
    fetchTodo()
  }

  const onCangeHandler = (e) =>{
    setTodo({
      title: e.target.value,
    })
  }
  return (
    <div>
      <div>
        <h1>Today's Todo List</h1>
      </div>
      {/* 수정영역 */}
      <div>
        <input placeholder='수정할아이디' type="text" onChange={(e) =>{setTargetId(e.target.value)}} value={targetId}/>
        <input placeholder='수정할내용' type="text" onChange={(e) =>{setEditText(e.target.value)}} value={editText}/>
        <button onClick={() => onUpdateHandler()}>수정</button>
      </div>

      <br />
      <br />

      {/* 추가 영역 */}
      <div>
        <form onSubmit={(e) => {
            e.preventDefault();
            onSubmitHandler()
          }}>
          <input type="text" onChange={(e) => onCangeHandler(e)} value={todo.title}/>
          <button>추가하기</button>
        </form>
      </div>
      <br />
      <br />
      {todos?.map(todo => 
        <div key={todo.id}> {todo.id} - {todo.title} 
          &nbsp;<button 
          onClick={() => onDeleteHandler(todo.id)}>삭제</button>
        </div>
      )}
    </div>
  )
}

export default App