Vue.js 에서의 Axios

이전 포스팅에서 vue 에 대해서 다룬적이 있다.

자세한 사항은 아래 참고 포스팅을 확인바란다.

 

 

Vue에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다다.

Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양한게 특징이자 장점이다.

 

설치는 간단하게 npm을 사용하여 가능하고 npm에 대해서는 아래 참고 포스팅을 참고하도록 하자.

• npm install axios

 

라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 되고 axios 변수를 이용하여 아래와 같이 HTTP GET 요청을 날리는 코드를 작성한다.

• html 부분

<div id="app">   <button v-on:click="fetchData">axios</button> </div>

• js 부분

new Vue({   el: '#app',   methods: {     fetchData: function() {       axios.get('https://localhost:8080/test/')         .then(function(response) {           console.log(response);         })         .catch(function(error) {           console.log(error);         });     }   } })

 

이렇게 해두면 html에서 axios 라는 글자를 클릭시 url에서 정보를 받아오는 코드이다.

console.log로 되어있으므로 개발자 도구 콘솔에서 표시가 된다.

 

응답제어

.then

비동기 통신이 성공했을 경우, .then()은 콜백을 인자로 받아 결괏값을 처리할 수 있다.

.catch

.catch() 를 통해 오류를 처리하고 error 객체에서는 오류에 대한 주요 정보를 확인할 수 있다.

 

method 종류

그리고 위 예제에서는 axios.get(url) 이 되어있는데 눈치가 빠른분이라면 알겠지만 get method를 통해서 통신하게 된다.

다른 방법은

get	axios.get('test/1')
post	axios.post('/name', { name: 'qwerty' })
put	axios.put('test/2', { name: 'ytrewq' })
delete	axios.delete('test/3')

 

config 옵션

headers

헤더를 수정해서 보내야 한다면 headers를 사용하면 된다.

 headers: {'X-Requested-With': 'XMLHttpRequest'}

 

params

params는 HTTP 요청에 붙일 URL 파라미터를 의미한다. 

post방식에서 주로 많이 사용이 되고 위 예시처럼 사용하면 된다.

 

data

data는 HTTP 요청 보디에 실어서 보낼 데이터를 의미한다. 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용한다.

data: {
    name: 'qwerty'
},
  

timeout

 

timeout은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성, 요청 시간이 지정된 값을 초과하면 에러가 발생한다.

timeout:1000 (밀리세컨드)

 

responseType

responseType은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정한다. 옵션으로는 arraybuffer, document, json, text, stream이 가능하며 기본 값은 json입니다.

responseType: 'json'

 

---

참고 포스팅

https://thenicesj.tistory.com/134

Vue.js 실습 part.1

https://thenicesj.tistory.com/140

node.js 란?