시그마 삽질==six 시그마

Vue HTTP 통신 본문

프로그래밍/Javascript

Vue HTTP 통신

Ethan Matthew Hunt 2020. 5. 2. 07:28
Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책  추천드립니다.

구매를 원하시는 분은 요기를 클릭해주세요

해당 글은 책 내용을 바탕으로 작성되었습니다.

 

 

1. 뷰 리소스

 

초기에 권장했으나 2016녀말부터 공식 지원 중단 지금은 Axios로...

예제에서 response만 로그로 보면 body값이 문자열..

<html>
  <head>
    <title>Vue Resource Sample</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="getData">프레임워크 목록 가져오기</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    
    <!-- vue resource CDN !!!!!! -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
    
    <script>
      new Vue({
        el: '#app',
        methods: {
          getData: function() {
            this.$http.get(`https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json`)
                .then(function(response) {
                  console.log(response);
                  console.log(JSON.parse(response.data));
                });
          }
        }
      });
    </script>
  </body>
</html>

 

 

2. Axios

 

뷰에서 가장 많이 사용하는 HTTP 통신 라이브러리

Promise 기반의 API형식이 다양하게 제공

data속성이 일반 문자열 형식이 아니라 객체 형태.JSON.parse()로  객체변환 불필요

 

<html>
	<head>
		<title>Vue with Axios Sample</title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="getData">프레임워크 목록 가져오기</button>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        
         <!-- axios resource CDN !!!!!! -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        
		<script>
			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);
							});
					}
				}
			});
		</script>
	</body>
</html>

 

 

'프로그래밍 > Javascript' 카테고리의 다른 글

vue 싱글 파일 컴포넌트 체계  (0) 2020.05.02
Vue 라우팅  (0) 2020.05.02
vue의 생명주기  (0) 2020.05.02
Vue란 무엇인가?  (0) 2020.05.02
Vuex  (0) 2020.04.19
'프로그래밍/Javascript' Related Articles more
Comments