[React] Axios

안세웅·2023년 4월 26일

React

목록 보기

8/8

Axios란

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
백엔드와 프론트엔드와 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 합니다.

Axios와 Fetch API 차이

일반적으로 javascript에서 API 연동 시 Fetch API를 사용였으나
많은 사용자들은 Fetch API보다 Axios를 더 선호하고 있습니다.

우선 두가지를 코드로 확인 해보면

Fetch API

//형식
fetch(url, option).then();

//예시
fetch("localHost:3000/test", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    data: "test",
  }),
}).then((response) => console.log(response));

Axios

//형식
axios(option).then();

//예시
axios({
  url: "localHost:3000/test",
  method: "POST",
  headers: { "Content-Type": "application/json" },
  data: {
    name: "test",
  },
}).then((response) => console.log(response));

Fetch는 body 프로퍼티를 사용하고 Axios는 data 프로퍼티를 사용
Fetch는 url이 함수의 인자로 들어고 Axios는 option의 객체로 들어감
Fetch는 body 부분을 JSON 데이터형식 으로 변환 해주어야 하지만 Axios는 자동으로 변환

추가로 다른 포스트에서 많은 차이점을 확인하였습니다.

출처 : https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

이와같이 Fetch 보다 Axios 많은 기능을 지원하고 문법이 조금이나마 간소화 되어 많은 사용자가 선호하는 듯 합니다.

Axios 사용법

npm install axios

axios 설치 후 아래와 같이 사용 할 수 있습니다.

//형식
axios(option).then();

//예시
axios({
  url: "localHost:3000/test",
  method: "POST",
  headers: { "Content-Type": "application/json" },
  data: {
    name: "test",
  },
}).then((response) => console.log(response));

Axios 메소드

GET: axios.get(url[, config])
POST: axios.post(url, data[, config])
PUT: axios.put(url, data[, config])
DELETE: axios.delete(url[, config])

post함수로 예시를 들면 아래와 같이 사용 할 수 있습니다.

// 예시1
axios.post('test',{
		name: 'testName',
  })
  .then(function (response) {
    // 성공했을 때
    console.log(response);
  })
  .catch(function (error) {
    //에러가 발생 했을 때
    console.log(error);
  })
  .finally(function () {
    // 항상 실행
  });

//예시2
axios.post("/test2", {
		name: 'testName',
    })
    .then((response) => {
		//성공했을 때
  		console.log(response);
    }).catch((error) => {
		//에러가 발생 했을 때
  		console.log(error);
    }).finally(() => {
    	//항상 실행
  });

axios Instance 만들기
커스텀 속성의 instance를 생성 가능 합니다.

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {'Content-Type": "application/json'}
});

interceptors

인터셉터는 요청 하기전, then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다.

크게 3가지로 구분됩니다.
1. instance 생성
2. request
3. response

//인스턴스 생성
const api = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {'Content-Type": "application/json'}
});

//request 인터셉터
api.interceptors.request.use(
    function (config) {
        // 요청 성공 직전 호출됩니다.
        // axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능)
        return config;
    }, 
    function (error) {
        // 요청 에러 직전 호출됩니다.
        return Promise.reject(error);
    }
);

//response 인터셉터
api.interceptors.response.use(
    function (response) {
    /*
        http status가 200인 경우
        응답 성공 직전 호출됩니다. 
        .then() 으로 이어집니다.
    */
        return response;
    },

    function (error) {
    /*
        http status가 200이 아닌 경우
        응답 에러 직전 호출됩니다.
        .catch() 으로 이어집니다.    
    */
        return Promise.reject(error);
    }
);

이를 활용하여 요청전 header에 인증토큰을 추가하거나 토큰이 만료되어 재발급을 받는 로직을 구현 할 수 있습니다.

//인스턴스 생성
const authApi = axios.create({
  headers: {
    "Content-Type": `application/json;charset=UTF-8`,
  },
});

//request 인터셉터
authApi.interceptors.request.use(
  function (config) {
    //요청 전 처리할 작업
    const token = localStorage.getItem("accessToken");

    if (!token) {
      return config;
    }

    if (config.headers && token) {
      config.headers.authorization = `Bearer ${token}`;
      return config;
    }
  },
  function (error) {
    //요청 실패 시 처리할 작업
    return Promise.reject(error);
  }
);

// response 인터셉터
authApi.interceptors.response.use(
  function (response) {
    //정상응답 -> 리턴
    return response;
  },
  async (error) => {
    //에러
    const config = error.config;
    const status = error.response.status;
    //HTTP Status Code : 401 -> Unauthorized
    if (status === 401) {
      // 서버에서 보내주는 토큰 만료 코드 : 1003
      if (error.response.data.code === 1003) {
        const originalRequest = config;
        // token refresh 요청
        await axios
          .post(
            `/member/refreshToken`, // token refresh api
            {}
          )
          .then((res) => {
            //기존 요청에 새로운 토큰으로 변경
            originalRequest.headers.authorization = `Bearer ${res.data.accessToken}`;
            //로컬 스토리지에 새로운 토큰 저장
            localStorage.setItem("accessToken", res.data.accessToken);
          })
          .catch((error) => {
            //에러 시 재로그인을 위해 로그인 페이지로 이동
            window.location.href = "/login";
          });
        // 요청 실패했던 요청 새로운 accessToken으로 재요청
        return axios(originalRequest);
      }
    }

    return Promise.reject(error);
  }
);

Reference

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

안세웅

이전 포스트