728x90
HTTP(HyperText Transfer Protocol) : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜
프로토콜 : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙
제이쿼리(jQuery)의 ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법. 웹 앱 HTTP 통신의 대표적인 사례
엑시오스(Axios) : 가장 많이 사용되는 HTTP 통신 라이브러리
설치하는 법
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
| API 유형 | 처리결과 |
| axios.get('URL주소').then().catch() | 해당 URL 주소에 대해 HTTP GET 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 오류가 발생하면 catch() 안에 정의한 로직이 실행됨 |
| axios.post('URL주소').then().catch() | 해당 URL 주소에 대해 HTTP POST 요청을 보냄. then()과 catch()는 동일 |
| axios({옵션 속성}) | HTTP요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음. 데이터 요청을 보낼 URL, HTTP 요청방식, 보내는 데이터 유형, 기타 등등 |
<!DOCTYPE html>
<html lang=ko dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Router 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(){
//엑시오스 GET 요청 API
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response){
console.log(response);
});
}
}
});
</script>
</body>
</html>
response 객체를 확인해보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 별도로 JSON.parse()을 사용하여 객체로 변환할 필요가 없다
728x90
'FrontEnd' 카테고리의 다른 글
| 뷰 템플릿 (0) | 2022.08.05 |
|---|---|
| Vue.js 뷰 라우터 | 네스티드 뷰 | 네임드 뷰 (0) | 2022.07.28 |
| Vuejs 뷰 컴포넌트 통신 (0) | 2022.07.27 |
| Vue.js 컴포넌트 (0) | 2022.07.25 |
| Vue.js 기초 | 라이프사이클 (0) | 2022.07.25 |
