Ajax와 Axios와 fetch 정리

자바스크립트에서 HTTP 네트워크 통신 방법인 ajax, axios, fetch에 대해 정리해보자.

 

서버에 get/post 요청을 보낼 때 가장 간단한 방법은

1. 브라우저 주소창에 url 입력하기 -> get요청

2. <form action=’요청url’ method=’post’> -> post요청

이렇게 인데 이들의 단점은 브라우저가 새로고침 된다는 것이다.

 

새로고침없이 서버에 요청을 보낼 수 있는 방법이 오늘 정리하는 네트워크 통신방법 세가지이다.

 

Ajax

Asynchronous JavaScript and XML의 약자로

자바스크립트를 이용해 클라이언트와 서버간의 데이터를 주고받는 비동기 http 통신이다.

서버와 통신하기 위해서는 XMLHttpRequest(XHR) 객체가 필요한데

이를 이용해서 전체 페이지가 아닌 필요한 데이터만 갱신할 수 있다(동적업데이트).

 

Axios

XHR을 사용해서 통신을 하는 ajax보다 http 요청을 처리하기에 효율적인 라이브러리이다.

Promise 기반 API로 비동기적으로 요청을 처리할 수 있고 response 데이터를 다루기 쉽다.

자동으로 데이터를 json형식으로 변환한다.

서버에서 가지고 온 데이터는 모두 문자형식이다. object/array를 그대로 들고 올 수 없고 이 데이터에 따옴표를 쳐서 가져온다. 이것을 json형식이라고 하는데, axios에서는 json형식을 자동으로 변환해준다.

뛰어난 브라우저 호환성, 요청취소/timeout 등의 기능으로 react에서 많이 사용된다.

 

Axios의 사용방법은 아래의 글을 확인하면 된다.

https://hyriverstudy.tistory.com/29

[React-Query] 0. 리액트쿼리 들어가기 전 Axios 알아보기

 

fetch

ES6부터 도입된 javaScript 내장 라이브러리이다.

axios와 마찬가지로 Promise 기반으로 만들어져 비동기요청을 보다 간결하고 가독성있게 처리할 수 있다.

내장 라이브러리이므로 사용하는 프레임워크의 업데이트가 잦거나 불안정한 경우(react-native) fetch를 사용하면 좋다.

(지금 next.js 강의를 듣는데 거기에서도 fetch를 사용했었는데, next.js가 아직 업데이트가 잦은 프레임워크라 그런가보다..!)

Axios에 비해 지원되지 않는 브라우저들이 있고(구형 브라우저), 결과값을 response객체로 받으므로 json변환을 해줘야한다.

fetch('URL').then((res) => res.json()).then((data) => { console.log(data) } )