[Vue] 뷰 HTTP 통신 (Vue resource, axios)

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

뷰 HTTP 통신

웹 앱의 HTTP 통신 방법

현재 웹 앱에서는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해주기 때문에 HTTP 통신은 필수로 구현해야하는 기능이다.

HTTP는 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜이다. 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(reponse)으로 해당 데이터를 보내주는 방식으로 동작한다.

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

뷰에서는 ajax를 지원하기 위한 라이브러리를 제공하는데 뷰 리소스와 axios이다.

뷰 리소스

this.$http.get()을 이용해 해당 URL에서 제공하는 데이터를 받아올 수 있다.

.then()으로 콜백처리를 할 수 있다.

엑시오스(axios)

엑시오스는 가장 많이 사용되는 HTTP 통신 라이브러리이다. Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 원하는 로직을 구현할 수 있다.

//HTTP GET
axios.get('URL').then().catch();

//HTTP POST
axios.post('URL').then().catch();

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

reponse 객체를 보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 별도로 JSON.parse()를 사용하여 객체로 변환할 필요가 없다.