axios
HTTP 통신을 하는 방법들이 있지만 그 중 Vue.js에서 권고하는 방식은 axios 입니다.
axios는 Promise 기반의 API 형식이고 다른 방법들에 비해 문서화도 잘되어 있고 많이 사용됩니다.
axios 설치
- NPM을 사용하여 설치하는 방법 (링크)
- CDN을 이용하여 설치하는 방법
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios 사용법
<div id="app">
<button v-on:click="getData">해당 URL 값 가져오기</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
getData: function () {
axios.get(`URL`)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
});
</script>
axios HTTP 요청 메서드 종류
axios.get(url [, config])
- 서버에서 데이터를 가져올 때 사용하는 메서드
- config: headers, params, baseURL 등
axios.post(url [, data[, config]])
- 서버에 데이터를 생성할 때 사용하는 메서드
- data: 생성할 데이터
- config: headers, params, baseURL 등
axios.put(url [, data[, config]])
- 서버에 특정 데이터를 수정할 때 사용하는 메서드
- data: 수정할 데이터
- config: headers, params, baseURL 등
axios.delete(url [, config])
- 서버에 데이터를 삭제할 때 사용하는 메서드
config 옵션
- baseURL: 인스턴스의 기본 URL 값을 설정할 수 있습니다. 이를 통해 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다.
- header: 헤더에 값을 넣어 보내거나 수정할 수 있습니다.
- params: GET 요청을 보낼 때 URL 뒤에 파라미터를 붙일 수 있습니다. null이거나 undefined인 경우 파라미터는 조합되지 않습니다.
- timeout: 요청에 대한 응답을 받기 까지의 제한 시간을 설정할 수 있습니다. 이 시간이 초과하면 에러가 발생합니다.
- responseType: 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. Default는 json 입니다.