Vue와 Axios를 활용한 서버통신

Axios란?

HTTP 클라이언트 라이브러리 중 하나이며, vue에서 공식적으로 권장하는 클라리어은트 라이브러리다. Promise를 기반의 자바스크립트 비동기 처리 방식을 사용하며, IE8 이상을 포함한 모든 최신 브라우저를 지원한다. 비동기 처리방식으로 진행되기 때문에 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 작성해야한다.

---

 

 Fetch와 Axios의 차이점? 

 

내가 처음 React를 배웠을때는 통신으로 Fetch를 사용했었다. 그렇다면 Fetch와 Axios의 차이점은 뭘까? 먼저 둘의 공통점부터 작성하자면, 둘 다 Ajax(Asynchronous Javascript And Xml)로 Javascript를 사용한 비동기 통신이며,클라이언트 와 서버간의 XML 데이터를 주고 받는 기술이라는 것이다.그렇다면 차이점은 뭘까?각 통신방법에 대한 장점을 정리하여 둘의 차이점을 비교하고자 한다.

 

 

• Axios : return 값이 Promise 객체 형태이고, fetch와 달리 구형 브라우저도 지원한다. Fetch에서 지원하지 않는 다양한 기능을 제공하는데, 응답 시간초과를 설정하는 방법이 존재하며, CSRF 보호 기능이 내장되어 있다. 정말 정말 편리하게도 JSON 데이터 자동변환이 가능하다. node.js에서의 사용이 가능하며, 요청취소(request aborting) 또한 가능하다. fatch와 다르게 catch에 걸렸을때, then을 실행하지 않고, console에 해당 에러로그를 보여준다. 다만 내장 라이브러리가 아니기때문에 import 및 설치를 해야한다. 

• Fetch: Axios와 동일하게 return값이 Promise 객체 형태이다. 자바스크립트 내장 라이브러리이기 때문에 import를 하지 않고 사용할 수 있다. 라이브러리의 업데이트에 따른 에러방지가 가능하다. (React Native의 경우 업데이트를 자주하기 때문에 업데이트를 쫓아오지 못하는 경우가 생긴다. 하지만 Fetch는 이러한 경우를 방지할 수 있다.) 그러나 지원하지 않는 브라우저가 존재하며, 네트워크 에러가 발생햇을경우 reponse timeout API를 제공하지 않아, 마냥 기다려야하는 단점이 존재한다. 

 

 

---

 

 Axios 사용하기 

 

 

위에서도 설명했듯이 Axios는 내장 라이브러리가 아니기 때문에 따로 설치가 필요하다. 보통 npm / yarn을 통해 설치한다. 따라서 기본적으로 node.js가 설치되어 있어야한다. node.js가 설치되어 있다는 전제하에 Axios 설치부터, 사용법까지 작성하려한다.

 

 

Axios 설치하기

아래의 명령어를 실행하여 Axios를 설치해보자. 사실 직접적으로 설치하지않아도 CDN을 이용하여 사용이 가능하긴 하다.

npm install axios   //npm의 경우
yarn add axios     //yarn의 경우
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  //HEAD영역에 직접삽입

 

Axios의 사용법

다양한 별칭 method으로 간단한 사용이 가능하다. 아래의 명령어 중 필요한 명령어를 사용하여 Axios로 통신을 해보도록 하자.

axios.get(url[, config])                    - get의 경우(불러오기)
axios.post(url[, data[, config]])           - post의 경우(입력하기)
axios.patch(url[, data[, config]])          - patch의 경우(수정하기)
axios.delete(url[, config])                 - delete의 경우(삭제하기)

 

---

 

 Axios 문법 

 

 

1. 불러오기(GET)

서버에서 데이터를 가져올 때 사용한다. 가장 많이 사용하는 별칭이기도 하다.

axios.get('통신할 서버주소')
  .then(res => {
    console.log(res);  //값을 불러왔을때
  })
  .catch(err) => {
    console.log(err); //통신에러가 떴을때
  });

 

두번째 인자인 config 객체에 요청값을 같이 넘길 수 있다.

axios.get('통신할 서버주소', { 
   params,            // 사용할땐 {} 안에 작성한다.
   headers,           // 사용할땐 {} 안에 작성한다.
   timeout: 응답초과시간 // 해당시간안에 응답이 오지않는다면 에러처리된다. 
})
.then(res => { console.log(res) })

 

 

 

2. 입력하기(POST)

서버에 값을 입력 할 때 사용한다. 서버의 데이터 리스트의 마지막에 현재 넘기고 있는 정보를 추가한다.

axios.post('연결할 서버주소', { 보낼값 })
.then(res => {console.log(res);})

 

 

 

3. 수정하기(PATCH) 

서버에 있는 특정 데이터를 수정한다.

axios.patch('연결할 서버주소', { 변경하고자 하는 값 })
.then(res => {console.log(res);})

 

 

 

4. 삭제하기(DELETE)

서버에 있는 특정 데이터를 삭제한다.

axios.delete('/연결한 서버주소/삭제할 특정값')
.then(res => {console.log(res);})

 

 

 

 

---

 

 어떤게 더 좋을까? 

 

 

각 프레임워크에서 권장하는 통신방법을 사용하거나, 필요에 따라 통신방법을 고르는것이 좋을 것같다. React-Native의 경우엔 필수로 fetch를 사용하는 것이 더욱 편해보이고, Vue는 권장하고 있는 Axios를 사용하는 것이 좋아보인다. 사실 요즘 대세가 Axios이긴하지만, 그래도 두가지 모두 사용할 줄 아는것이 가장 좋다고 생각한다. 개발자는 원래 한가지에만 고여있지 않는 직업이니깐 말이다.😓

 

 

 

 

 

 

 

참고주소 : uxgjs.tistory.com/138

Vue.js에서 axios를 사용하여 서버통신하는 방법

참고주소 : qastack.kr/programming/40844297/what-is-difference-between-axios-and-fetch

Axios와 Fetch의 차이점은 무엇입니까?

참고주소 : donghunee.github.io/study/2019/10/21/react/

[React]axios와 fetch 비교