axios 적응기

소개

axios란?

백엔드에 네트워크 요청이 필요한 애플리케이션을 개발할 때 사용하는 HTTP 클라이언트

왜 fetch 대신 axios인가?

fetch

• 지원하지 않는 브라우저가 존재한다.
• 네트워크 에러 발생 시 response timeout 이 없어 기다려야한다.
• body를 JSON.stringify()를 사용해 직접 변환시켜줘야한다.
• Content-Type을 application/json으로 직접 설정해야한다.

axios

• 모든 브라우저에서 지원 한다.
• Request Timeout 설정이 가능하다.
• Interceptor 기능이 있다.
• body를 자동으로 JSON 데이터로 변환시켜준다.

물론 fetch를 사용해도 axios의 장점들을 따라 갈 수 있는 방법이 있지만! axios는 기본적으로 제공하는 기능이기때문에 더욱 편리한 axios를 활용한다.

사용법

get

get이 뭐에요?

• 서버로부터 데이터를 가져오기만 하고, 서버의 상태를 변경하지 않는다.
• url은 노출되기 쉽기때문에 민감한 정보를 전송하는 데에는 적합하지 않다.
• header 부분의 url에 데이터를 담아 해당 url에 존재하는 정보를 가져온다.

문법

const axios = require('axios');

axios.get(url) {
    //성공 로직 
    .then((reponse) => {
        console.log(response);
    })
    //실패 로직
    .catch((error) => {
        console.log(error);
    })
    //항상 실행 되는 로직 
    .finally(() => {

    })
}

post

post가 뭐에요?

• GET과 달리 데이터를 요청의 본문(body)에 담아 전송한다.
• 따라서 POST 요청은 보통 HTML 폼 데이터를 서버로 제출하거나, JSON 또는 XML과 같은 데이터를 전송하는 데 사용된다.

문법

const axios = require('axios');

axios.post(url, payload) {
     //성공 로직 
    .then((reponse) => {
        console.log(response);
    })
    //실패 로직
    .catch((error) => {
        console.log(error);
    })
    //항상 실행 되는 로직 
    .finally(() => {

    })
}

create

create가 뭐에요?

기존의 axios 인스턴스를 기반으로 한정적인 설정을 가진 커스텀 인스턴스를 생성할 수 있다.

문법

//기본
const instance = axios.create([config]);

//예시 
const fetcher = axios.create({
  baseURL: BASE_URL,
  timeout: DEFAULT_TIME_OUT,
});

interceptors

인터셉터가 뭐에요?

• 요청이나 응답을 전송하기 전이나 후에 가로채어 변경하거나 처리하는 기능을 제공한다.
• 요청 전에 인증 헤더를 추가하거나 응답 전에 에러 처리를 수행하는 등의 작업을 수행할 수 있다.

문법

axios.interceptors.request.use(
  function (config) {
    // 요청 전에 수행할 작업
    return config;
  },
  function (error) {
    // 요청 전에 에러 처리
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  function (response) {
    // 응답 전에 수행할 작업
    return response;
  },
  function (error) {
    // 응답 전에 에러 처리
    return Promise.reject(error);
  }
);

마무리

이번에 오 나의 부모님 프로젝트를 진행하며 auth 인증에 관한 내용이 이해가 잘 안갔는데 인터셉터를 공부하고 나니 단번에 이해가 되었다 :)