Vue 엑시오스 http 라이브러리

doit! vue.js 입문 책을 보며 학습한 내용을 간략히 정리하였습니다.

책의 내용중 ES6관련된 부분은 추후 추가 학습 예정

axios 라이브러리

브라우저와 서버간의 데이터를 주고받기 위한 통신 방법으로 대표적으로 ajax 통신이 있으며 vue.js에서는 이러한 ajax 통신을 지원하는 axios 라이브러리가 존재합니다.

엑시오스는 Promise 기반의 api 형식을 가진 라이브러리로서 비동기 프로그래밍을 쉽게 처리할 수 있는 장점을 가지고 있습니다. 비동기 프로그래밍의 대표적인 자바스크립트는 단일 스레드를 기반으로 처리되기에 여러 코드가 접근하여 데이터를 변경시엔 유지 보수나 데이터를 보호하는데 까다로운 문제가 발생합니다. 이러한 문제를 보완하고자 Promise를 활용합니다.

데이터 통신과 관련된 라이브러리에선 Promise를 사용하며 대표적으로 사용하는 라이브러리중 하나가 axios입니다.

API 유형 처리결과
axios.get(‘URL address’).then().catch() 해당 URL 주소에 http GET 요청
서버에서 보낸 데이터를 정상적으로 받았을시 then() 의 로직 실행, 오류 발생시 catch() 로직 실행
axios.post(‘URL address’).then().catch() 해당 URL 주소에 http POST 요청
서버에서 보낸 데이터를 정상적으로 받았을시 then() 의 로직 실행, 오류 발생시 catch() 로직 실행
axios({옵션 속성}) http 요청의 속성을 정의하여 전송(url, http type, data ,etc)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
new Vue({
  el: '#app',
  	methods: {
  		getData: function() {
  axios.get('https://raw.githubusercontent.com/joshua1988/doit-			vuejs/master/data/demo.json')
  		.then(function(response) {
 					 console.log(response);
 			 });
		  }
	  }
});

vue_study_10.html

1
2
3
<div id="app">
	<button v-on:click="getData">프레임워크리스트 가져오기</button>
</div>

과정

  1. button 클릭시 v-on:click 으로 getData() 호출 이벤트
  2. getData() 를 통해 axios를 이용하여 http get 통신 서버에 요청
  3. 요청 후 성공시 .then() 안 로직 실행
  4. response 객체 반환

Result

스크린샷 2019-06-19 오전 1 29 11

Reference