Ajax 요청 중 Axios or Fetch

AJAX(Asynchronous Javascript And XML)

 

->비동기적인 웹서비스를 개발하기 위한 기법. 이름에 XML이 있지만 꼭 XML을 사용하는 것은 아니다. 요즘에는 JSON을 많이 사용함. 쉽게 말해 page 이동없이 서버에 요청을 보내고 응답을 받는 기술. Ajax 요청은 jQuery, axios, fetch 같이 라이브러리를 이용해서 보낸다. (client와 server 간의 통신이다.)

 

                   

 

 그렇다면 axios와 fetch의 차이는??

 

 

1. axios

• 구형 브라우저를 지원한다.(IE11와 같은 구형 Browser까지도 구현)
• 응답시간 초과를 설정하는 기능이 있다.

EX) 

axios({
	method : 'post',
    url : 'login',
    timeout : 4000,
    data : {
    	name : 'Dong-kyun',
        gender : 'Male'
    }
})
.then(response => ~~~~)
.catch(error => console.error(error))

• JSON 데이터로의 자동변환이 가능하다. (http 통신은 JSON type을 이해하지 못한다! 이 때문에 Front -> Back으로 request를 보낼 때 이 request의 type은 string이어야 한다. 반대로, Back -> Front 로 request가 올 때 이 response의 type은 string이다. 이 data를 활용하기 위해서는 JSON 객체로 바꾸어야 한다.)
• http 요청을 중간에 가로채서 examine or change 가 가능하다.
• return 값은 Promise 객체이다. (이 말은 결국 .then() 과 .catch() 로 받는다는 이야기)

2. fetch

• Javascript의 내장 Library이기 때문에 import하지 않고 사용할 수 있다.
• 라이브러리의 업데이트의 따른 에러 방지가 가능하다. (리액트 네이티브의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데 fetch는 이를 방지해준다.)
• return 값은 Promise 객체이다. (이 부분은 axios와 동일)

---

기본 문법

 

<axios>

const options = {
	url : 'http://lcoalhost~',
    method : 'POST',
    headers : {
    	'Content-Type' : 'application/json'
    },
    data : {
    	a : 10,
        b : 20,
    }
}
axios(options).then().catch()

<fetch>

const url = 'http://localhost~~';
const options = {
	method : 'POST',
    headers : {
    	'Content-Type' : 'application/json'
    },
    body : JSON.stringify({
    	a : 10,
        b : 20
    })
}
fetch(url, options).then().catch()

<차이점>

1. 데이터를 보낼 때 fetch는 body property를, axios는 data property를 사용한다.

2. fetch에서는 데이터를 직접 string화해야 한다. (axios에서는 내부적으로 string화를 진행한다.)

3. fetch에서는 url이 parameter로 axios에서는 url이 option object로 들어간다.

---

실제로 내가 사용하는 코드의 모습

 

<fetch>

const likepost = (id) => {
	fetch('/api/post/like', {
    	method : 'put',
        headers : {
        	"Content-Type" : "application/json"
        },
        body : JSON.stringify({
        	postId : id
        })
    }).then(res => res.json())
      .then(response => ~)
      .catch(error => ~)
}

<axios>

const likepost = (id) => {
	axios.put(
    	'/api/post/like',
        headers : {
        	"Content-Type" : "application/json"
        },
        data : {
        	postId : id
        })
}.then(response => ~)
 .catch(error => ~)

---

일단 지금까지의 지식으로만 생각해봤을 때, React만 사용하는 내가 굳이 fetch를 사용할 이유가 있을까 싶다. 아마도 특별한 이유가 생기지 않는 이상 계속해서 axios를 사용해나가지 않을까 싶다. 하지만, fetch의 개념 또한 중요하기 때문에 같이 정리한다.