[React] axios 와 fetch 차이점

react에서 네트워크 통신을 도와주는 api인 axios와 fetch.
이것은 어떨 때 사용하고, 무슨 차이가 있는지, 그래서 사용법은 어떤지에 대해서 정리해보려한다.

나의 경우에는 camp-us프로젝트를 하면서 axios를 먼저 써보고, 회사 프로젝트인 Hisms에서는 fetch를 써봤는데 정확하게 알고 한게 아니라 일처리하기 급급해서 개념정리를 미루고 있었다. 약간의 여유가 있을 때 정리해두려고 한다.

Axios

Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

axios 지원하는 브라우저

1. 사용하기 좀 더 편리하다. -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? 사용하기 쉽게? 만들려고 노력한 흔적이 보인다.(는 아래 코드를 통해서 확인)

2. fetch 에는 존재하지 않는 기능이 좀 더 많다.

3. Promise based

4. axios는 json을 자동으로 적용해서 response 객체를 바로 반환

5. axios는 data를 바로 전달

6. 요청을 중도 Cancel, 응답시간 초과 설정 등의 기능이 있다.

7. 400, 500대의 Error 발생시에 reject 로 response를 전달해 catch로 잡아낼 수 있다. (fetch의 경우 네트워크 장애나 요청이 완료되지 않은 경우에만 reject로 response를 전달하기 때문에, 400, 500대의 Error의 경우는 resolve로 받아 따로 예외처리를 해야 한다.)

8. 자신이 진행중인 프로젝트 상위에 import 시켜줘야한다.
   import axios from 'axios'

Fetch

1. 라이브러리를 import 하지 않아도 사용할 수 있다.

2. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능

3. Promise based

4. Request Aborting 에 대해서 표준적인 방법을 제공해 주지 못함.

5. 네트워크 에러가 발생했을 때, 계속 기다려야됨 -> response timeout API 제공이 안됨.

6. 지원하지 않는 브라우저가 있다.

7. Error handling 관련해서 문제가 좀 있다.

• Catch 에 걸렸을 때, 이후 .then( ~~~ )을 실행한다.
• axios 의 경우엔 .then(~~~)을 실행하지 않고, console 창에 해당 에러로그를 보여준다.

8. fetch는 promise자체를 반환해서 json으로 변환을 해야한다.

9. 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객체를 얻는다.

결론

1. 둘다 쓰는데 무리 없고, 잘 동작 하나, axios 는 주로 react, fetch 는 react native 에 사용한다.(React-native 의 빠른 업데이트 때문에 ..Quora 에 답변 다신 어떤분 개인 의견)

2. 전체적으로 이 둘은 비슷하나, axios 가 조금 더 장점이 많은 것 같다.

3. fetch 가 좀더 가볍고 axios 가 상대적으로 좀 더 무거운 느낌(설치도 해야하고 제공하는 기능이 더 많다.)

4. 요청 취소를 위해선 fetch 가 아닌 axios 등의 다른 라이브러리 사용이 필요하다.

간단한 http 요청에는 Fetch 써도 상관없지만, axios 와 비교했을 때 axios 의 장점, fetch 의 단점이 더 부각 되기 때문에 많은 기능이 필요할 때는 axios 를 쓰는게 좋을 것 같다. 허나 React-Native 의 경우엔 업데이트를 라이브러리가 따라가지 못할 수도 있기 때문에, fetch 를 쓰는게 더 좋을 수도 있다..개인적인 생각으로는 axios가 좀 더 편하기 때문에 나는 axios를 더 많이 찾게될 것 같다.