axios

axios란?

Promise 기반의 HTTP 통신 라이브러리로 기존의 fetch 메서드보다 다양한 기능이 있어 자주 사용된다.

axios는 자바스크립트 자체 내장 메서드는 아니고 npm을 통해 설치해야하는 패키지이다.

yarn add axios

import axios from 'axios';

axios의 특징

axios는 fetch와 마찬가지로 프로미스 기반으로 통신을 하는데 다음과 같은 특징을 가지고 있다.

• json 변환을 자동으로 처리한다.
  fetch의 경우 응답된 데이터에서 .json()메서드로 변환을 해주어야하지만 axios는 이를 처리해주기 때문에 바로 .data 프로퍼티로 데이터에 접근할 수 있다.

• 요청에 대한 timeout 기능
  응답이 오기까지의 최대 대기시간을 설정할 수 있다.

• 요청 및 응답에 대한 인터셉터 기능
  요청을 보내기 전 또는 응답을 받은 후 실행할 코드는 설정할 수 있다.

사용법은 다음과 같다.

axios.메서드(주소, [요청 데이터])

axios 설정하기

api주소, timeout, 인터셉터 설정 등을 미리 설정할 수 있다.

import axios from "axios";

const createAxiosInstance = () => {
  // .create 메서드로 axios의 기본 설정을 할 수 있다.
  const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_SERVER_URL,
    timeout: 2000
  });
  // 요청이 보내지기 전 가로채서 특정 코드 실행 가능
  axiosInstance.interceptors.request.use(
    (request) => {
      console.log(request);
      return request;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
  // 응답을 받기 전 가로채서 특정 코드 실행 가능
  axiosInstance.interceptors.response.use((response) => {
    if (response.status === 200) return response.data;
    return response;
  });
  
  return axiosInstance;
};

export const instance = createAxiosInstance();

그러면 아래와 같이 간단하게 통신 코드를 작성할 수 있게된다.

import { instance } from "@/api/config";

const getPosts = async () => {
  try {
    const response = await axiosInstance.get("/posts");
    return response;
  } catch (error) {
    console.log(error);
  }
};