[Front/React] Axios vs Fetch (+ axios 인터셉터, 인스턴스)

 

Fetch와 axios는 모두 promise 기반의 HTTP 통신 라이브러리

 

Axios

Node.js와 브라우저를 위한 라이브러리

모듈 설치 후 import 필요

import axios from "axios";

 

Fetch

ES6에 들어온 JavaScript 내장 라이브러리

별도로 import할 필요가 없음

 

---

Axios vs Fetch

1. 요청문법

fetch는 두 개의 인자를 받는데, 첫 번째 인자는 리소스 url, 두 번째 인자는 요청의 설정 옵션

설정 옵션의 기본값은 GET 요청

fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

 

 

axios는 Fetch와 유사하게 작성할 수도 있으며 HTTP 메서드로서 작성 가능하며 하나의 인자로 작성도 가능

axios(url, {
  method: "get",
  headers: {},
  data: {},
});

axios.get(url, {
  headers: {},
  data: {},
});

axios({
  method: "get",
  url: url,
  headers: {},
  data: {},
});

 

---

2. JSON type

Fetch는 .json( ) 메서드를 호출

fetch(url)
  .then((res) => res.json())
  .then(console.log);

 

Axios는 기본적으로 JSON 타입으로 사용

axios.get(url).then((res) => console.log(res.data));

 

 

post 요청 시 body에 보내고자 하는 data를

axios는 data 프로퍼티에 기본적으로 데이터를 할당함

fetch는 JSON.stringfy( )를 사용해서 문자열로 변환한 뒤에 body 값에 할당

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

 

---

3. Content-Type

axios는 기본적으로 Content-Type을 application/json으로 설정

fetch는 명시적으로 설정을 해줘야함

 

---

4. Error 처리

fetch와 axios는 요청에 대한 응답이 resolve(이행)되거나 reject(거부) 됨

 

axios는 statuscode가 2xx 범위를 넘어가면 거부되어 catch( )를 통해서 처리가 가능

axios
  .get(url)
  .then((res) => console.log(res.data))
  .catch((err) => {
    console.log(err.message);
  });

 

 

fetch는 404에러나 다른 에러 응답을 받았다고해서 프로미스를 거부하지 않고, 네트워크 장애가 발생한 경우에만 거부

.then 절을 사용해서 수동으로 HTTP 에러를 처리

fetch(url)
  .then((res) => {
    if (!res.ok) {
      throw new Error(
        `Error: The status is ${response.status}`
      );
    }
    return res.json();
  })
  .then(console.log)
  .catch((err) => {
    console.log(err.message);
  });

 

이처럼 then에서 response의 ok가 true인지 false를 통해 에러를 처리

---

5. Timeout

axios는 timeout 속성을 추가해서 요청이 종료될 때까지의 시간을 밀리초로 지정이 가능

기본 설정은 0

axios
  .get(url, {
    timeout: 5000,
  })
  .then((res) => console.log(res.data))
  .catch((err) => {
    console.log(err.message);
  });

 

 

fetch는 AbortController 인터페이스를 사용해서 요청 시간 제한 가능

const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 5000);

fetch(url, {
  signal: signal,
  })
  .then((res) => res.json())
  .then(console.log)
  .catch((err) => {
    console.error(err.message);
  });

 

abort( ) 메서드가 실핼될 때마다 fetch 요청이 종료되는 구조

---

6. 인터셉터(interceptors)

axios를 사용하는 것의 장점으로 interceptors가 있음

interceptors
사전적 정의: 가로채는 사람, 방해자, 장애물

=> then이나 catch로 처리되기 이전에 요청과 응답을 가로챔

 

interceptors는 중간에서 request나 response를 가로채는 기능을 함

request에서는 요청을 보내기 전에 작업 가능

response는 응답이 return되기 전에 원하는 작업 수행

 

// 요청이 전달되기 전에 작업 수행
axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (res) {
    // 2xx 범위에 있는 상태 코드
    return res;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드
    return Promise.reject(error);
  });

 

---

 

※ axios 인스턴스

axios.create([config])로 새로운 인스턴스 생성 가능

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

커스텀 인스턴스 기본값 설정

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 

Config 우선순위

기본값, 인스턴스의 defaults 속성, 요청의 config 인자를 순서대로 찾음

-> 후자가 우선순위 더 높음

 

 

우리의 프로젝트에서는 axios를 사용했고, interceptors도 사용을 했다.
내가 interceptors part를 맡지 않았지만 구현된 코드를 보면서 중간에서 어떤 작업을 해주는지 명확하게 와닿지 않았다.
겉으로 언뜻 보기에는 alert창이나 console로 띄우는게 다였는데 그것들은 then이나 catch에서도 할 수 있는 부분이라고 생각해서 어느 부분에서 장점을 가지고 있는지 예시 코드들을 확인하면서 이해할 필요성이 있었다.

 

 

[ Request 전 ]

1) 모든 헤더에 Authorization을 미리 담는 작업 가능

2) Access 토큰 만료됐을 때 케이스 처리 가능 -> 우리 프로젝트에서는 구현 x (리펙토링 시 진행 예정)

3) 로그 기록, 모든 요청과 응답을 빠르게 기록 가능

4) 속도 제한, 클라이언트에서 HTTP 호출 속도를 제한하여 서버의 부하를 줄일 수 있음

const axios = require(‘axios’);
const debounce = require('lodash.debounce');
axios.interceptors.request.use(
  res => {
    return new Promise((resolve) => {
       // 2초 마다 request 호출
       debounce(
          () => resolve(config),2000);
       });
    });
  }
)

 

[ Response 전 ]

공통된 error 처리 가능

 

=> 각 페이지에서 관리하는 것이 아닌 공통적으로 작업하는 부분들을 인터셉터에서 작업이 가능하다는 장점이 있다.

 

---

 

참고자료

https://velog.io/@eunbinn/Axios-vs-Fetch

https://tlsdnjs12.tistory.com/26

https://axios-http.com/kr/docs/interceptors

https://velog.io/@xmun74/axios-interceptors-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://frontdev.tistory.com/entry/Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95