[Vue.js] 기초-HTTP 통신

Taeho Min·2021년 9월 28일

Vue.js

목록 보기

3/7

1. 뷰 리소스

뷰 리소스(resource)는 초기에 코어 팀에서 공식적으로 권하는 라이브러리 였으나, 2016년 말에 공식적인 지원이 중단 되었다. 그 이유는 HTTP 통신 관련 라이브러리는 뷰 라우팅, 상태 관리와 같은 라이브러리와는 다르게 프레임워크에서 필수적인 기능이 아니라고 판단 했기 때문이다.
그래서 대충 스킵...

2. axios

axios는 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리로, ajax를 지원하기 위한 라이브러리이다.

2.1 axios 설치 및 사용법

1) CDN을 이용하여 설치

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2) NPM을 이용하여 설치

$ npm install axios

3) 사용 방법

// HTTP GET 요청
axios.get('URL 주소').then().catch();

// HTTP POST 요청
axios.post('URL 주소').then().catch();

// HTTP 요청에 대한 옵션 속성 정의
axiox({
method: 'get',
url: 'URL 주소',
...
});

[axios로 데이터 받아오기]

<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>
        <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-valuejs/master/data/demo.json')
                             .then(function(response) {
                                 console.log(response);
                             });
                    }
                }
            });
        </script>
    </body>
</html>