[React] axios 와 fetch 차이점
react에서 네트워크 통신을 도와주는 api인 axios와 fetch.
이것은 어떨 때 사용하고, 무슨 차이가 있는지, 그래서 사용법은 어떤지에 대해서 정리해보려한다.
나의 경우에는 camp-us프로젝트를 하면서 axios를 먼저 써보고, 회사 프로젝트인 Hisms에서는 fetch를 써봤는데 정확하게 알고 한게 아니라 일처리하기 급급해서 개념정리를 미루고 있었다. 약간의 여유가 있을 때 정리해두려고 한다.
Axios
Axios란?
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
axios 지원하는 브라우저
-
사용하기 좀 더 편리하다. -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? 사용하기 쉽게? 만들려고 노력한 흔적이 보인다.(는 아래 코드를 통해서 확인)
-
fetch 에는 존재하지 않는 기능이 좀 더 많다.
-
Promise based
-
axios는 json을 자동으로 적용해서 response 객체를 바로 반환
-
axios는 data를 바로 전달
-
요청을 중도 Cancel, 응답시간 초과 설정 등의 기능이 있다.
-
400, 500대의 Error 발생시에 reject 로 response를 전달해 catch로 잡아낼 수 있다. (fetch의 경우 네트워크 장애나 요청이 완료되지 않은 경우에만 reject로 response를 전달하기 때문에, 400, 500대의 Error의 경우는 resolve로 받아 따로 예외처리를 해야 한다.)
-
자신이 진행중인 프로젝트 상위에 import 시켜줘야한다.
import axios from 'axios'
Fetch
-
라이브러리를 import 하지 않아도 사용할 수 있다.
-
React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능
-
Promise based
-
Request Aborting 에 대해서 표준적인 방법을 제공해 주지 못함.
-
네트워크 에러가 발생했을 때, 계속 기다려야됨 -> response timeout API 제공이 안됨.
-
지원하지 않는 브라우저가 있다.
-
Error handling 관련해서 문제가 좀 있다.
- Catch 에 걸렸을 때, 이후 .then( ~~~ )을 실행한다.
- axios 의 경우엔 .then(~~~)을 실행하지 않고, console 창에 해당 에러로그를 보여준다.
-
fetch는 promise자체를 반환해서 json으로 변환을 해야한다.
-
fetch는 body로 json.stringify()를 통해서 서버가 이해할 수 있도록 문자열 파싱을 해야한다.
코드비교
Fetch JSON post request
let url = 'https://someurl.com';
let options = {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
property_one: value_one,
property_two: value_two
})
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
}
Axios JSON post request
let url = 'https://someurl.com';
let options = {
method: 'POST',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
property_one: value_one,
property_two: value_two
}
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
let data = await response.data;
// do something with data
}
코드 자체는 비슷비슷하다. 중요 부분만 요약하여 정리하자면,
[데이터 넘기는 방법]
axios : 객체로 넘김
fetch : string화 해서 넘김
[정상적인 요청/응답 체크]
axios : status 값이 200인지, statusText를 통해서 확인
fetch : response 객체가 ok프로퍼티를 포함하는지 확인
[response 얻는 방법]
axios : response 객체의 data property에 접근하여 얻는다.
fetch : response 객체에 .json() 메소드를 호출하여서 json객체를 얻는다.
결론
-
둘다 쓰는데 무리 없고, 잘 동작 하나, axios 는 주로 react, fetch 는 react native 에 사용한다.(React-native 의 빠른 업데이트 때문에 ..Quora 에 답변 다신 어떤분 개인 의견)
-
전체적으로 이 둘은 비슷하나, axios 가 조금 더 장점이 많은 것 같다.
-
fetch 가 좀더 가볍고 axios 가 상대적으로 좀 더 무거운 느낌(설치도 해야하고 제공하는 기능이 더 많다.)
-
요청 취소를 위해선 fetch 가 아닌 axios 등의 다른 라이브러리 사용이 필요하다.
간단한 http 요청에는 Fetch 써도 상관없지만, axios 와 비교했을 때 axios 의 장점, fetch 의 단점이 더 부각 되기 때문에 많은 기능이 필요할 때는 axios 를 쓰는게 좋을 것 같다. 허나 React-Native 의 경우엔 업데이트를 라이브러리가 따라가지 못할 수도 있기 때문에, fetch 를 쓰는게 더 좋을 수도 있다..개인적인 생각으로는 axios가 좀 더 편하기 때문에 나는 axios를 더 많이 찾게될 것 같다.
Author And Source
이 문제에 관하여([React] axios 와 fetch 차이점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunkim/React-axios-와-fetch-차이점저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)