Axios - Basic

Axios

Javascript로 프로젝트를 진행할때, 데이터 통신을 해야하는 경우에는 fetch() 함수를 사용한다.
Axios는 fetch() 함수보다 많은 편리성을 제공하는 HTTP통신을 위한 Javascript라이브러리이다.

Axios >>>> Fetch

• IE8 이상의 모든 브라우저 지원

• JSON 자동변환

  • response.json() 사용 x

• 에러 핸들링

• Base Instance

  • 미리 기본값을 지정해두고 효율적으로 사용가능

• CSRF 보호기능

이외에도 많은 편리함과 장점이 있기 때문에, Axios를 사용하는 것이 좋다.

Ex.

위에서 이야기 했던 Base Instance에 대한 내용을 예시로하여, 간단한 API요청을 만들어 보았다.

api.js파일을 따로 만들어서 코드를 분리하였고, React 프로젝트 속 Public 폴더에 data.json을 만들어 요청을 해보았다.

1. Instance 생성

import axios from "axios";

const API = axios.create({
  baseURL: "/data/",
});

axios속 create 메소드를 사용하여 생성할 수 있다.
create함수는 객체를 parameter로 가지며 다양한 key값으로 구성할 수 있다.

몇 가지만 살펴보자면,

const API = axios.create({
  baseURL: "요청을 보낼 기본 주소",
  headers: "헤더",
  params: "요청을 보낼 URL parameter",
});

/* 
만약 value를 여러개 설정하고 싶다면
  
   params: {
     name: "enjoy",
     age: "100"
   }
   
value로 객체를 전달해 주면 된다.
*/  

등이 있다.

2. Instance를 활용한 다양한 요청

위에서 지정한 baseURL에서 요청보낼 주소의 뒷 부분만 변경하여 효율적으로 사용할 수 있다.

export const API_FIRST = {
  blueprint: () => API.get("first/blueprint.json"),
  fakeData: () => API.get("first/fakeData.json"),
  mockData: () => API.get("first/mockData.json"),
};

export const API_SECOND = {
  fakeList: () => API.get("second/fakeList.json"),
  mockList: () => API.get("second/mockList.json"),
};

사용성을 높이기 위해 객체의 메소드로 정의를 했다.
메소드의 parameter를 추가하여 get함수 속 주소에 변수 query를 추가할 수도 있고, 추가 params도 전달할 수 있다.

get함수 속 주소는 baseURL에 더해져서 요청을 보내게 된다.

// baseURL: "/data/",
// blueprint: () => API.get("first/blueprint.json"),

	요청주소 = /data/first/blueprint.json

또한 파일이 분리되어 있기 때문에 두 객체모두 export를 했다.

원하는 곳에서 import하여 아래 코드처럼 간단히 사용할 수 있다.

const getData = async () => {
    try {
      const data = await API_FIRST.blueprint();
      setData(data);
    } catch (error) {
      console.log(error);
    }
  };