Ajax (axios와 fetch 비교)

 

 

Ajax(Asynchronous Javascript And Xml) 란

---

Javascript 를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다.

XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다.

 

react에서 네트워크 통신을 도와주는 api인 axios와 fetch를 비교해보자.

 

 

1. axios

• 구형 브라우저를 지원한다.
• 응답시간 초과를 설정하는 방법이 있다.
• JSON데이터 자동변환이 가능하다.
• node.js에서의 사용이 가능하다
• request aborting (요청취소)가 가능하다
• catch에 걸렸을 때, .then을 실행하지 않고, .console창에 해당 에러 로그를 보여준다.
• return 값은 Promise 객체 형태이다.

 

2. fetch

• 자바스크립트 내장 라이브러리이기 때문에 import하지 않고 사용할 수 있다.
• 라이브러리의 업데이트에 따른 에러 방지가 가능하다 ( React Native의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데, fetch의 경우 이를 방지할 수 있다.)
• 네트워크 에러가 발생했을 때 기다려야 한다. (reponse timeout API 제공 x)
• 지원하지 않는 브라우저가 있다.
• return 값은 Promise객체 형태이다.

 

3. 코드 비교

fetch - POST

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 - POST

 

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
}

 

 

결론

 

사용자의 필요에 따라 고르면 될 것으로 보인다.

React-Native의 경우엔 업데이트가 너무 빠르기 때문에 fetch를 쓰는게 좋아보인다. 

혹은 좀 더 기능이 필요할 땐 axios를 사용할 수 있다.

 

 

 

참조 : https://velog.io/@leeeeunz/TIL-35.-axios%EC%99%80-fetch%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90