Do it Vue.js 입문 정리4

Posted by HULIA(휴리아)
2018. 4. 12. 01:55 프론트엔드/자바스크립트

웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리의 ajax가 있습니다

ajax는 서버에서 받아온 데이터를 표시할때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할수 있게 하는 자바스크립트 기법


vue에서도 ajax를 지원하기 위한 라이브러리를 제공합니다

vue 프레임워크의 필수 라이브러리로 관리하던 vue 리소스와 요즘 가장 많이 사용하는 액시오스(axios)이다


vue리소스는 초기에 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 에반이 공식적인 지원을 중단하기로 결정하면서 다시 기존에 관리했던 pageKit 팀의 라이브러리로 돌아감

그 이유는 HTTP 통신 라이브러리는 vue 라우팅, 상태 관리와 같은 라이브러리와는 다르게 프레임워크에 필수적인 기능이 아니라고 판단했기 때문



액시오스는 현재 vue 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다.

에반도 vue 리소스 라이브러리를 공식 라이브러리에서 제외하면서 액시오스를 언급


액시오스는 promise기반의 api 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있습니다


promise 기반의 API 형식이란 무엇일까요?

promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체입니다

자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날때까지 기다려주지 않습니다.

따라서 데이터를 요청하고 받을때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 promise를 활용합니다

그리고 데이터를 받아왔을때 promise로 데이터를 화면에 표시하거나 연산을 수행하는 등 특정로직을 수행합니다


데이터 통신과 관련한 여러 라이브러리 대부분에서 promise를 활용하고 있으며, 액시오스에서도 promise기반의 API를 지원함


액시오스 공식 리포지토리

https://github.com/axios/axios

예제와 안내 잘 되어 있음


엑시오스 설치 CDN

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


엑시오스 설치 NPM(ES6)

https://github.com/axios/axios#installing



//HTTP GET 요청

axios.get('url주소').then().catch();

--> 해당 url주소에 대해 HTTP GET 요청을 보냅니다.

서버에서 보낸 데이터를 정상적으로 받아오면 then()안에 정의한 로직이 실행되고,

데이터를 받아올때 오류가 발생하면 catch()에 정의한 로직이 수행됩니다


//HTTP POST 요청

axios.post('url주소').then().catch();

--> 해당 url주소에 대해 HTTP POST 요청을 보냅니다. then()과 catch()의 동작은 위에서 살펴본 내용과 동일합니다


//HTTP 요청에 대한 옵션 속성 정의

axios({

    method:'get',

    url:'url주소',

    ...

});

-->HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼수 있습니다. 데이터 요청을 보낼때 URL, HTTP요청방식, 보내는 데이터유형, 기타 등등


더 많은 형식은

https://github.com/axios/axios#axios-api


예제

<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-vuejs/master/data/demo.json')

.then(function(response) {

console.log(response);

});

}

}

});

</script>



'프론트엔드 > 자바스크립트' 카테고리의 다른 글

앱)자바스크립트 자릿수 체크하는 로직  (0) 2018.06.04
Do it Vue.js 입문 정리5  (0) 2018.04.15
Do it Vue.js 입문 정리3  (0) 2018.04.04
Do it Vue.js 입문 정리2  (0) 2018.04.01
Do it Vue.js 입문 정리  (0) 2018.03.31