fetch와 axios 비교(쉽게 키워드만)

 

웹 애플리케이션을 개발할 때, 서버와의 비동기 통신은 필수적이죠.

신입 프런트엔드 면접에서는 무조건 나오고, 경력 면접에서도 모르면 많은 점수가 깎이는 주제인 

JavaScript에서 사용되는 두 가지 주요 HTTP 통신 방법인 Axios와 Fetch에 대해 알아보겠습니다.

 

Fetch

Fetch API는 JavaScript에서 HTTP 요청을 보내기 위한 내장 함수입니다.

Promise 기반으로 작동하며, XMLHttpRequest보다 직관적이고 강력한 API를 제공합니다.

Fetch는 기본적으로 브라우저에 내장되어 있어 별도의 라이브러리 설치가 필요 없습니다.

 

단점으로는 

1) 기본적으로 쿠키를 보내거나 받지 않습니다. credentials 옵션을 설정해야만 쿠키를 함께 보낼 수 있습니다.

2) 응답 시간 초과 설정 부재: 요청 타임아웃을 설정하는 기본 기능이 없습니다.

 

fetch 결론(키워드)

1. http 요청을 보내기 위한 내장함수

2. promise 기반 작동

3. 별도의 설치가 필요 없음

4. 기본적으로 쿠키를 보내지 않음

5. 응답 시간 초과 설정 기능 없음

 

Axios

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

Promise 기반의 API를 제공하여 비동기 통신을 쉽게 처리할 수 있습니다.

Axios는 자동 변환 JSON 데이터, HTTP 요청 취소, HTTP 요청과 응답을 중단하는 기능 등을 지원합니다.

장점

1. 브라우저와 node.js에서 모두 사용 가능합니다. 양쪽 환경에서 작동하므로, 코드의 재사용성이 높아짐

2. 요청 취소: 진행 중인 요청을 취소할 수 있는 기능을 제공합니다.

3. 요청이 오래 걸릴 경우 자동으로 중단할 수 있는 응답 시간 초과 설정이 가능합니다. 

4. 자동 json 변환: 요청의 데이터를 자동으로 json으로 변환하고, 응답을 json객체로 자동으로 파싱합니다.

 

단점

1. 라이브러리 설치를 해야 합니다.

 

 

 

Fetch 사용법

// get 요청
fetch('https://api.example.com/data')
  .then(response => response.json()) // 응답을 JSON으로 파싱
  .then(data => console.log(data))
  .catch(error => console.error('There was an error!', error));


// post 요청
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('There was an error!', error));

 

 

Axios 사용법

// 라이브러리 설치 필요
npm install axios

import axios from 'axios'; 

// get 요청

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });


// post 요청

axios.post('https://api.example.com/data', {
    title: 'foo',
    body: 'bar',
    userId: 1,
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

 

 

 

 

javascript에서 사용되는 두 가지 주요 http 통신 방법인 axios랑 fetch에 대해서 알아봤습니다.

자주 사용하는 것이라도 설명하려고 하면 말이 잘 안 나올 수 있으니 미리 공부합시다.

프레임워크 없는 프론트엔드 개발:자바스크립트 프레임워크 뜯어보기

 

 

이 포스팅은 쿠파 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.