[React] Axios

Axios

Axios는 Promise 기반의 API를 제공하며, HTTP 요청을 만들고 응답을 처리하는데 사용된다. 주로 데이터를 가져오거나 전송할 때 사용된다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

Axios 설치

• npm 설치

npm install axios

• yarn 설치

yarn add axios

Axios API

Axios는 axios(config)와 요청 메소드 명령어를 사용하여 HTTP 요청을 보낼 수 있다. axios(config)는 HTTP 요청 시 'url', 'method', 'data' 속성을 config에서 지정해야한다. 요청 메소드 명령어를 사용할 경우에는 아래와 같이 사용하면 된다.

axios(config)

axios config에 url, method, data 속성을 지정해서 보내줄 수 있다. method에 get, post, put, delete 등의 원하는 HTTP 요청을 입력하면 된다.

// POST 요청
axios({
  method: 'post',
  url: 'https://tiltile.co.kr/til/5',
  data: {
    title: 'title',
    content: 'content'
  }
});

// get 요청
axios({
  method: 'get',
  url: 'https://tiltile.co.kr/til/list',
  responseType: 'stream'
})
  .then(res => res.data);

요청 메소드 명령어

• axios.get(url[, config])
  HTTP GET 요청을 보내며, 서버로부터 데이터를 가져오거나 조회할 때 사용된다.
• axios.delete(url[, config])
  HTTP DELETE 요청을 보내며, 서버에서 리소스를 삭제할 때 사용된다.
• axios.post(url[, data[, config]])
  HTTP POST 요청을 보내며, 서버에 새로운 데이터를 생성하거나 업로드할 때 사용된다.
• axios.put(url[, data[, config]])
  HTTP PUT 요청을 보내며, 서버에 데이터를 업데이트 또는 생성할 때 사용된다.
• axios.patch(url[, data[, config]])
  HTTP PATCH 요청을 보내며, 서버에 부분적인 데이터 업데이트를 요청할 때 사용된다.
• axios.request(config)
  모든 HTTP 메서드에 대한 일반적인 인터페이스를 제공하는 메서드이며, config 객체를 통해서 메서드, URL, 데이터 등을 지정할 수 있다.
• axios.head(url[, config])
  HTTP HEAD 요청을 보내며, 서버에서 헤더 정보만을 요청한다.리소스의 존재 여부나 최종 수정 일자를 확인할 때 사용된다.
• axios.options(url[, config])
  HTTP OPTIONS 요청을 보내며, 서버에서 지원되는 메서드와 헤더 등의 옵션을 확인할 수 있다. CORS와 관련된 요청에서 서버에게 어떤 메서드와 헤더를 사용할 수 있는지 확인할 때 사용된다.

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // GET 요청
    axios.get('https://tiltile.co.kr/til/list')
      .then(res => {
        setData(res.data);
      })
      .catch(error => {
        console.error('블로그 게시물을 가져오는데 실패하였습니다', error);
      });

    // POST 요청
    const postData = {
      title: 'title',
      body: 'content',
      userId: 1
    };

    axios.post('https://tiltile.co.kr/til', postData)
      .then(res => {
        console.log('블로그 게시물이 등록되었습니다.', res.data);
      })
      .catch(error => {
        console.error('블로그 게시물을 다시 등록해주세요.', error);
      });

    // PUT 요청
    const putData = {
        title: 'title',
        body: 'content',
        userId: 1
    };

    axios.put('https://tiltile.co.kr/til/20', putData)
      .then(res => {
        console.log('블로그 게시물이 수정되었습니다.', res.data);
      })
      .catch(error => {
        console.error('블로그 게시물 수정에 실패하였습니다.', error);
      });

    // DELETE 요청
    axios.delete('https://tiltile.co.kr/til/20')
      .then(res => {
        console.log('블로그 게시물이 삭제되었습니다.', res.data);
      })
      .catch(error => {
        console.error('블로그 게시물 삭제에 실패하였습니다.', error);
      });
  }, []); 

{/* 생략 */}

export default MyComponent;

전역 Axios 기본값 및 커스텀 인스턴스 기본값 설정

Axios에서는 모든 요청에 적용될 기본값인 config를 설정할 수 있으며, 전역 또는 커스텀 인스턴스를 통해 각각의 요청에 적용될 기본값을 설정할 수 있다. 전역으로 설정하고 나면, 모든 Axios 요청에서 baseURL과 헤더가 자동으로 설정된다. 커스텀 인스턴스를 생성할 때 config를 설정하면, 해당 인스턴스에만 적용되는 기본값을 설정할 수 있다.

// 전역 Axios 기본값 설정
axios.defaults.baseURL = 'https://api.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 인스턴스를 생성할 때 config 기본값 설정
const instance = axios.create({
  baseURL: 'https://api.com'
});

// 인스턴스를 만든 후 기본값 변경
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Axios 인터셉터

Axios 인터셉터를 사용하면 요청이나 응답을 보내기 전에(then 또는 catch로 처리되기 전) 수정하거나 확인할 수 있다. 인터셉터를 사용하면 전역적으로 요청이나 응답을 조작할 수 있다. 인터셉터는 use 메소드를 통해 설정할 수 있으며, axios.interceptors.request 또는 axios.interceptors.response를 사용하여 설정할 수 있다.

// 요청 인터셉터 추가
axios.interceptors.request.use(function (config) {
    // 요청 전에 수행할 작업
    console.log('요청을 보내기 전에 수행할 작업');
    return config;
  }, function (error) {
    // 요청 에러 처리
    console.error('요청에 에러가 발생했습니다.', error);
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(function (response) {
   // 응답 데이터 전에 수행할 작업
    console.log('응답 데이터를 받기 전에 수행할 작업');
    return response;
  }, function (error) {
   // 응답 에러 처리
    console.error('응답에 에러가 발생했습니다.', error);
    return Promise.reject(error);
  });

Axios 프로젝트에 적용하기

블로그 프로젝트를 진행하면서 로그인 회원만 블로그 작성하기, 회원정보 수정하기 등과 같은 회원의 token을 담아서 보내야했다. 다른 방법을 시도했지만 한번만 토큰이 발송되고 다음번에는 토큰이 발송되지 않는 오류가 발생하면서 팀원들과 여러가지 방법을 찾다가 axios 인터셉터를 이용하여 token이 있다면 항상 token을 보낼 수 있도록 설정하였다.

API.js

import axios from 'axios';

const API = axios.create({
  baseURL: 'https://tiltile.co.kr',
});

API.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default API;

useTilStore.js

import { create } from 'zustand';
import API from '../../API';

export const useHotTilListStore = create((set) => ({
  data: [],
  isLoading: false,
  getHotTilData: async (url) => {
    try {
      const response = await API.get(`${url}`);
      const data = response.data;
      set({ data: data });
    } catch (error) {
      console.error(`데이터를 가져오는 중에 오류가 발생했습니다:`, error);
      set({ isLoading: false });
    }
  },
}));

참고자료
https://axios-http.com/kr