-
[Vue.js] Vue Http 통신, 엑시오스(axios)란?Vue 2019. 1. 21. 23:57
vue에서도 ajax를 지원하기 위한 라이브러리를 제공함
라이브러리는 엑시오스(axios) 와 뷰 리소스가 있다.
하지만 엑시오스만 다룰 것이다 왜냐하면
현재 가장많이 사용되는 HTTP통신 라이브러리이기 때문이다
초창기에는 뷰 리소스가 공식 HTTP통신 라이브러리였지만 현재는 아니다.
엑시오스란?
Promise 기반의 API 형식 .
Promis란 비동기 로직 처리에 유용한 자바스크립트 객체이다
API유형
처리결과
axios.get('URL주소').then().catch()
해당 URL로 get방식으로 요청.
then()안에 반환값 로직 작성.
catch()안에는 오류발생시 로직 작성.
axios.post('URL주소').then().catch()
해당 URL로 POST방식으로 요청.
then()안에 반환값 로직 작성.
catch()안에는 오류발생시 로직 작성.
axios({옵션})
HTTP요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음
예제
SIB , simple is Best!
1234567891011121314151617181920212223242526272829303132<<!DOCTYPE html><html lang="en" dir="ltr"><head><!--vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" ></script><!--엑시오스 CDN --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title>Http 통신, 뷰 리소스</title></head><body><div id="app1"><button v-on:click="getData"> 호출 </button></div><script>new Vue({el: '#app1',methods:{getData: function(){axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json').then(function(response){alert(response);console.log(response); // 객체 형태로 반환. 파싱작업 불필요});}}});</script></body></html>cs 'Vue' 카테고리의 다른 글
[Vue.js] 뷰 디렉티브란? (0) 2019.01.27 [Vus.js] Vue 템플릿과 데이터 바인딩하는 법 (0) 2019.01.27 [Vue.js] 네임드뷰 (0) 2019.01.21 [Vue.js] Vue 라우터란? (2) 2019.01.20 [Vue.js] Vue 컴포넌트 데이터 주고 받기 (0) 2019.01.14