* Axios란,
브라우저, Node.js를 위한 Promise를 활용하는 HTTP 비동기 통신 라이브러리이다. 한 마디로 Axios는 Ajax처럼 백엔드와 프론트엔드 의 통신을 위해 사용되는 비동기 통신 방법이라고 생각하면 된다.
( Promise = 비동기 로직을 처리하기에 유용한 JS 객체를 말함 )
* Vue.js에 Axios 설치 및 사용하기
1. Axios 설치
npm i axios //axios 설치
2-1. Axios 기본으로 사용
통신방법은 Ajax와 마찬가지로 GET, POST, PUT,DELETE를 사용할 수 있다.
<script>
import Axios from 'axios'; --- Axios 주입
export default {
name: "examplePage",
methods : {
getPage(){
return Axios
.get(`/login`) --- 요청보낼 URL(GET,POST,PUT,DELETE 사용)
.then ( response => {
// 성공적으로 응답을 받는 경우
}).catch(error){
// 응답받기에 실패한 경우
console.log(error);
}
}
}
}
</script>
then => 응답이 올바르게 내려온 경우 반환값(response)에 대한 로직 작성
catch => 응답오류가 생긴 경우 발생한 요류에 대한 로직 작성
2-3 Axios 전역으로 설정하기
Axios를 전역적으로 사용하고 싶을 때는 컴포넌트별로 전부 import 해줄 필요 없이 main.js에 주입시켜주면 된다.
- main.js
import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios';
import router from '@/routes/router';
/* Axios 전역설정 */
Vue.prototype.$axios = Axios;
new Vue({
render: h => h(App),
router, // 전역적으로 router 를 사용하겠다고 정의
}).$mount('#app')
- loginPage.vue
<script>
export default {
name: "examplePage",
methods : {
getPage(){
return this.$axios // 주입시킬 필요없이 this를 사용
.get(`/login`) // 요청보낼 URL(GET,POST,PUT,DELETE 사용)
.then ( response => {
// 성공적으로 응답을 받는 경우
}).catch(error){
// 응답받기에 실패한 경우
console.log(error);
}
}
}
}
</script>
전역적으로 설정해 둔 Axios는 위의 코드처럼 this.$axios로 호출하여 사용할 수 있다.
2-4 Axios 인스턴스 만들어서 사용하기
Axios를 모듈화 하고 싶은 시점이 생긴다.
예를들면, 매 요청마다 동일한 header값을 세팅해야 할 때, 동일한 baseURL로 요청하고 싶을 때 등 인데
이럴 때는 Axios를 모듈화 하여 인터셉터로 활용한다.
import Axios from "axios";
import {store} from "@/store/store";
// 1. 기본 설정 추가
const AxiosInst = Axios.create({
baseURL : 'http://localhost:8080' // baseURL 추가
})
// 2. 모든 요청을 intercept 해서 header값 설정(토큰)
// : Axios request일때 이 설정값을 사용한다는 것
AxiosInst.interceptors.request.use(
(config) => {
let access_token = store.getters.getToken;
if(access_token){
config.headers.Authorization = `${access_token}`;
}
return config;
}
)
export default AxiosInst;
위의 코드에서는 기본적으로 AxiosInst의 기본 설정값과
AxiosInst로 Request 할 때 인터셉트 해서 넣어주고 싶은 설정값을 세팅한 것이다.
이렇게 인터셉트를 설정하고 사용하고자 하는 vue에서
해당 AxiosInst를 주입받아 사용하면 request를 보낼 때만 헤더값에 Authrozation값이 설정되고
baseURL은 해당 URL로 설정된다.
'FrontEnd > Vue.js' 카테고리의 다른 글
[Vue.js] Vuex , store로 상태 관리하기( JWT, token 저장 ) (0) | 2021.12.10 |
---|---|
[Vue.js] Vue.js 서버 연결 시 CORS (Cross Origin)문제 해결하기 (0) | 2021.11.23 |
[Vue.js] Vue.js axios service 설정 ( Axios 라이브러리 ) (0) | 2021.11.19 |
[Vue.js] Vue Router 설치 및 설정 (0) | 2021.11.11 |
[Vue.js] Vue.js 설치, 프로젝트 세팅 (0) | 2021.11.09 |
댓글