FrontEnd/Vue.js

06. 액시오스(Axios)

hanseom 2021. 9. 11. 13:50
반응형

1. 액시오스(Axios)

  뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다. Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직 구현 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있습니다.

 

tip) Promise 기반의 API 형식 : Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체입니다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기에 특정 로직의 처리가 끝날 때 까지 기다려주지 않습니다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용합니다.

 

[액시오스 공식 깃허브 리포지토리]

2. 액시오스 설치

  1) CDN 방식 : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2) NPM 방식 : npm install axios

3. API 형식

API 유형 처리 결과
axios.get('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP GET 요청을 보냅니다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행됩니다.
axios.post('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP POST 요청을 보냅니다.
axios({ 옵션 속성 }) HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있습니다. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형, 기타 등등.
https://github.com/axios/axios#axios-api

4. 사용 예제

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