Axios

 

Axios를 간단히 소개하자면 fetch() 함수처럼 request를 보내고 response를 받을 수 있는 라이브러리입니다. fetch() 함수랑 사용법은 비슷하지만 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다.
Axios를 설치하고 사용하는 방법에 대해 간략하게 정리한 글입니다.

설치

npm install axios

fetch vs axios

fetch 가 기존에 있지만 왜 axios 를 사용하는 것일까요?? 

그 이유는 axios 가 더 직관적이고 생략할 수 있는 부분이 있으며 간단하게 사용할 수 있기 때문입니다. 

 

fetch

async function getProducts() {
  const res = await fetch('https://www.naver.com/hello');
  const products = await res.json();
  return products;
}

async function createSizeReview(body) {
  const res = await fetch(
    'https://www.naver.com/hello',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    }
  );

  const newSizeReview = await res.json();
  return newSizeReview;
}

 

axios

async function getProducts() {
  const res = await axios.get('https://www.naver.com/hello');
  const products = res.data;
  return products;
}

async function createSizeReview(body) {
  const res = await axios.post(
    'https://www.naver.com/hello',
    body
  );

  const newSizeReview = res.data;
  return newSizeReview;
}

 

이렇게 코드를 비교해 보면 누가봐도 axios 가 더 직관적이고 사용하기 쉽고 불필요한 코드를 추가 할 필요가 

없다는 것을 느낄 수 있습니다. 저도 사용하고 있지만 매우 편리하다고 생각합니다.

params

Fetch에서는 쿼리 문자열을 직접 만들어서 넣어야 하는데요. Axios에서는 params라는 속성의 객체로 전달하면 됩니다.

async function getProducts({ offset = 0, limit = 10 }) {
  const res = await axios.get('https://www.naver.com/hello', {
    params: { offset, limit },
  });
  const products = res.data;
  return products;
}

// https://learn.codeit.kr/api/codeitmall/products/?offset=0&limit=10

 

instance

리퀘스트를 보낼 때 공통으로 사용하는 주소나 헤더가 있기 마련입니다.

이럴 때는 인스턴스를 만들면 반복되는 코드를 줄일 수 있습니다.

예를 들어서 아래 예시는 axios.js 파일에 axios.create() 함수를 사용해서 Axios 인스턴스를 만든 예시입니다.

baseURL을 지정해서 반복되는 코드를 줄였습니다.

 

// src/instance.jsx
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://www.naver.com/hello'
});

export default instance;

 

import instance from '../src/instance.tsx';

// ...

async function getProducts() {
  const res = await instance.get('/products');
  const products = res.data;
  return products;
}

async function createSizeReview(body) {
  const res = await instance.post('/size-reviews', body);
  const newSizeReview = res.data;
  return newSizeReview;
};