Fetch와 Axios

white noise·2025년 4월 27일

백엔드와의 연결을 할 때, 가장 많이 쓰이는 Fetch와 Axios를 알아보려고 한다.

Fetch

Fetch API는 JavaScript에서 HTTP 요청을 보내기 위한 내장함수이며, Promise 기반이다.

특징

내장함수이므로 별도의 설치가 필요하지 않음
기본적으로 쿠키를 보내지 않음
응답시간 초과 설정 기능 없음

예시

fetch() 함수는 get 요청이 디폴트이다.

fetch(url, options) // 기본구조

fetch('api 주소') // get 요청
	.then((response) => response.json()) //우리가 필요한 json형식이 아니기 때문에 .json()을 사용
	.then((data) => console.log(data)) //자바스크립트 객체형식
	.catch((error) => console.error(error)) // 요청에 실패했을 때 error 출력

get 형식은 요청전문을 받지 않아 옵션 인자가 필요없다.

fetch('api 주소', {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Hello",
  }),
})
	.then((response) => response.json())
	.then((data) => console.log(data))
	.catch((error) => console.error(error))

위의 예시는 post 형식이며, get 형식을 제외하고서는 위의 예시같이 method에 타입을 명시해줘야한다.

body에는 post에 보내는 데이터, header에는 json 형식의 사용을 알려주고 json으로 바꿔준다.

Axios

Axios는 브라우저와 node.js를 위한 JavaScript 라이브러리로, HTTP 요청을 실행한다. Axios 또한 Promise 기반이다.

특징

브라우저와 node.js에서 모두 사용가능 (코드 재사용성↑)
진행중인 요청 취소 가능
응답 시간 초과 설정 기능 존재
자동 json 변환
라이브러리를 설치해야함

npm install axios
yarn add axios
pnpm add axios
등을 이용해서 라이브러리를 설치해야함

import axios from 'axios';

사용하는 페이지에서도 import 해줘야 사용가능하다

예시

axios.get('url')
	.then((response) => console.log(response.data))
	.catch(error => console.error(error));

get 요청방식이며, axios.get처럼 점표기법을 사용하면 된다.

axios.post('url,{
           email,
           password,});

사소한 팁

내가 프로젝트를 진행하면서 유용하게 사용했던 Axios의 장점들이 있어서 정리할겸 남겨보려고 한다.

Axios instance 만들기

const instance = axios.create({
    baseURL: "http://12.34.56.78/api",
  	timeout: 1000,
  	headers: {}
});

이런 식으로 custom 속성을 가진 instance를 만들 수 있다.

이게 어떻게 도움이 되냐면 만약 login작업을 할 때의 api 요청 주소가 "http://12.34.56.78/api/login"이라면,

instance.post('/login,{
           email,
           password,});

이런식으로 단축해서 사용할 수 있다.

파라미터 데이터 이용

api 요청에서 쿼리스트링을 사용할 때, Axios는 params를 이용해서 쉽게 전달할 수 있다.

내가 프로젝트를 진행할 때, 백엔드에서 ".../keywords/result/?keyword1=one&keyword2=two" 형식으로 요청을 해서 밑의 코드처럼 params를 이용해서 쿼리스트링을 넘겨줬다.

const res = await instance.get("/keywords/result/", {
            params:{
                keyword1: keywords.one,
                keyword2: keywords.two,
            }
        });
        setLoading(false);
        return res.data;
    }