[js] fetch vs axios

이해용·2023년 4월 16일

fetch?

웹 브라우저에서 제공하는 네트워크 요청을 보내는 API입니다. fetch를 사용하면 비동기적으로 HTTP 요청을 보낼 수 있으며, 응답 데이터를 처리할 수 있습니다.

fetch API는 Promise 기반으로 동작합니다. fetch 함수를 호출하면 Promise 객체를 반환하며, 이 Promise는 HTTP 응답 객체를 반환합니다. 이러한 HTTP 응답 객체는 Response 인스턴스로, Body mixin을 구현하여 응답 데이터를 가져오는 데 사용할 수 있는 메서드를 제공합니다.

fetch 함수는 첫 번째 인자로 URL을 받습니다. 이 URL은 요청을 보낼 서버의 주소입니다. 두 번째 인자는 요청에 대한 설정 객체입니다. 설정 객체는 요청 방법, 헤더, 데이터 등을 지정할 수 있습니다.

fetch API를 사용하면 브라우저에서 CORS (Cross-Origin Resource Sharing) 정책을 준수하는 방법으로 데이터를 가져올 수 있습니다. 이를 통해 다른 도메인의 데이터를 가져와 사용할 수 있습니다.

예시

GET

Promise

function request() {
	fetch('API address', {
	  method: "GET"
	})
      .then(response => response.json())
	  .then(data => console.log(data))
	  .catch(error => console.error(error));
}
request();

async await

async function request() {
	try {
      	const response = await fetch('https://api.github.com/orgs/nodejs',
			{
				method: 'GET',
			});
			const data = await response.json();
			console.log(data)
		} catch (error) {
  			console.error(error)
		}
	}
request();

fetch 안에 있는 API address에서 JSON 데이터를 가져와 콘솔에 출력합니다. 가져오기가 실패하면 콘솔 에러를 출력합니다.

POST

fetch('API address', {
	method: "POST",
	headers: {
		'Content-Type': 'application/json;charset=utf-8'
	},
	body: JSON.stringify(data)
})
      .then(response => response.json())
	  .then(data => console.log(data))

fetch 장점?

비동기적인 요청 처리를 지원하므로 웹 페이지의 다른 작업을 차단하지 않고 백그라운드에서 요청을 보낼 수 있습니다.
2. Promise 기반으로 작동하므로 개발자는 보다 쉽게 비동기 요청의 상태를 추적하고 처리할 수 있습니다.
자바스크립트의 내장 라이브러리이기 때문에 별도로 import 할 필요가 없습니다.

fetch 단점?

오래된 브라우저는 지원이 어려울 수 있습니다.
네트워크 에러 발생 시 response timeout이 없어 기다려야 합니다.
JSON으로 변환해주는 과정 필요합니다.

Axios?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

특징

브라우저를 위해 XMLHttpRequests 생성
node.js를 위해 http 요청 생성
Promise API를 지원
요청 및 응답 인터셉트
요청 및 응답 데이터 변환
요청 취소
JSON 데이터 자동 변환
XSRF를 막기위한 클라이언트 사이드 지원

예시

GET

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

참고: async/await 는 ECMAScript 2017 문법입니다. 해당 문법은 인터넷 익스플로러와 오래된 브라우저에서 지원되지 않습니다.

POST

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//async await
async function postUser() {
  try {
    const response = await axios.post('/user');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}