반응형
Axios는 브라우저와 node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공합니다. 이번 포스팅에서는 Vue에서 Axios 사용하는 방법에 대해 알아보기로 하겠습니다.
1. Axios 설치
아래의 명령어를 이용하여 Vue 프로젝트에 Axios를 설치합니다. 설치가 완료되면 package.json에 Axios가 추가된 것을 확인할 수 있습니다.
| 명령어 : npm install axios |
2. Axios 예제 작성
ExAxios.vue 파일을 추가하고 아래와 같이 작성합니다.
|
<template>
<div>
<v-btn color="primary" @click="fetchData">get data</v-btn>
</div>
</template>
<script>
//axios 라이브러리 import
import axios from 'axios'
export default {
name: 'TestVueExaxios',
data() {
return {
};
},
mounted() {
},
methods: {
fetchData: function() {
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
|
Axios 응답 제어
- then : 비동기 통신이 성공했을 경우 .then()은 콜백을 인자로 받아 결과값을 처리할 수 있습니다.
- catch : .catch() 를 통해 오류를 처리합니다. error 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다.
3. Axios 예제 확인
아래의 테스트화면에서 버튼을 클릭하고 F12를 눌러 개발자 도구에서 예제 결과를 확인하실 수 있습니다.
4. Axios HTTP 요청 메서드 종류
액시오스에서 자주 사용되는 HTTP 요청 메서드를 알아보도록 하겠습니다.
- axios.get(url[, config]) : 서버에서 데이터를 가져올 때 사용하는 메서드입니다. 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있습니다.
- axios.post(url[, data[, config]]) : 서버에 데이터를 새로 생성할 때 사용하는 메서드입니다. 두 번째 파라미터 data에 생성할 데이터를 넘깁니다.
- axios.put(url[, data[, config]]) : 특정 데이터를 수정할 때 요청하는 메서드입니다. put 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. post와의 다른 점은 post는 여러 번 호출할 경우, 새로운 데이터가 지속적으로 추가되는 반면, put은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결괏값이 동일합니다.
- axios.delete(url[, config]) : 특정 데이터나 값을 삭제할 때 요청하는 메서드입니다.
5. Axios HTTP 요청 Config 옵션
Axios의 HTTP 요청 Config 옵션에 대해 알아보도록 하겠습니다.
- method : method는 요청을 할 때 사용할 요청 메서드입니다. method의 기본값은 get입니다.
- url : url은 액시오스 요청에 사용될 서버의 URL을 말합니다.
- baseURL : baseURL은 액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성입니다. 보통 API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다.
- headers : 헤더를 수정해서 보내야 한다면 headers를 사용하면 됩니다.
- params : params는 HTTP 요청에 붙일 URL 파라미터를 의미합니다. params가 null이나 undefined인 경우에는 파라미터가 조합되지 않습니다.
- data : data는 HTTP 요청 보디에 실어서 보낼 데이터를 의미합니다. 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용합니다.
- timeout : timeout은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성입니다. 요청 시간이 지정된 값을 초과하면 에러가 발생합니다.
- responseType : responseType은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 arraybuffer, document, json, text, stream이 가능합니다. 기본 값은 json입니다.
여기까지 Vue에서 Axios 사용방법에 대한 포스팅을 마치도록 하겠습니다.
반응형
'개발 Recording > vue.js & javascript' 카테고리의 다른 글
| [Vue.js] Vue instance prototype 추가하기 (0) | 2021.12.14 |
|---|---|
| [javascript] 웹 스토리지(localStorage, sessionStorage) 사용 방법 (0) | 2021.12.13 |
| [Vue.js] Vuetify v-data-table로 만드는 CRUD actions (0) | 2021.12.06 |
| Node.js + Express Router 클래스를 이용한 라우팅 (0) | 2021.12.03 |
| Node.js + Express 웹서버에서 CORS 이슈해결 (0) | 2021.11.30 |