Vue.js-HTTP 통신

웹에서 서버에 데이터를 요청하는 HTTP통신은 거의 필수로 구현해야 하는 기능이다.

 

HTTP라는 것은 브라우저와 서버간의 데이터를 주고받는 방식을 의미한다.

만약 내가 카카오톡으로 친구에게 메시지를 보내는데 그 친구는 카카오톡을 안쓰고 페이스북 메신져를 사용한다면 

페메를 사용하는 친구에게는 데이터가 전달되지 않을것이다.

 

이처럼 HTTP는 사용해서 단말기 간에 통신하기 위해 상호간에 정의한 규칙이다.

브라우저는 HTTP요청 송신을 보내면 서버는 HTTP응답 수신을 보내는 것이다.

 

뷰에서는 axios라는 라이브러리를 지원하는데 이는 웹에서 HTTP통신을 하기 위해 사용하는 통신 라이브러리이다.

(예전에는 뷰 리소스를 사용했지만 여러 문제때문에 엑시오스를 사용한다.)

 

 

지금부터 엑시오스를 설치하는 법을 알아보도록 하겠다.

CDN을 사용해서 하는 방법이 있고 NPM를 이용하여 설치하는 방법이 있는데 

지금은 개념만 간단히 잡고 가기위해서 CDN을 사용하도록 하겠다.

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

위 코드를 body하단부에 위치시키면 된다.

 

그럼 이제 axios를 사용할 수 있다.

먼저 간단한 API를 배워보도록 하겠다.

 

=>HTTP GET요청 

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

 

 

=>HTTP POST요청

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

 

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

axios({
	method: 'get',
    url: 'URL 주소',
    ...
})

 

간단하게 살펴보았다.

 

이제 각각 API에 대한 설명을 상세히 해보도록 하겠다.

API 유형	처리 결과
axios.get('URL 주소').then().catch();	해당 URL주소에 HTTP GET 요청을 보낸다.  데이터를 정상적으로 받아오면 then()함수안에 정의된 로직이 수행되고 , 데이터를 받아오는 동안 실패를 하면 catch()안에 정의된 로직이 수행된다.
axios.post(URL 주소),than().catch();	해당 URL 주소에 대해 HTTP POST 요청을 보낸다. then()과 catch()는 위의 내용과 같은 내용으로 수행한다.
axios({옵션 속성})	HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP요청 방식, 보내는 데이터 유형, etc...