[Vue] Axios Global 설정

안녕하세요🙏 개발자 재민콩입니다.

 

JQuery에서는 비동기 데이터 통신을 위해 Ajax를 사용하듯이,

Vue에서는 Axios를 사용합니다.

Axios를 사용하면서 반복적으로 사용하거나 공통적으로 들어갈 내용들을 Global에서 설정할 수 있는 방법에 대해 알아보겠습니다.

 

1. main.js

import Vue from 'vue';
import Axios from 'axios';

// Axios 설정
Vue.prototype.$axios = Axios;

// Django CSRF 설정
Axios.defaults.xsrfCookieName = 'csrftoken';
Axios.defaults.xsrfHeaderName = 'X-CSRFToken';

// 로컬 localhost ip 입력
Axios.defaults.baseURL = 'http://127.0.0.1:8000';
// 로컬 API KEY
Axios.defaults.headers.common['api-key'] = 'HbuzW5bL.Svunp75A3h7nxOgFqSwvt3V4ctmPrOqs';

 

2. .vue 페이지

호출 시 defaults로 설정한 xsrf, header등 정보가 같이 넘어가게 됩니다.

export default {
  name: 'AppMypage',
  methods: {
    getData() {
      // 아래 'api/test'은 baseURL 설정으로 인해 'http://127.0.0.1:8000/api/test'로 호출합니다.
      this.$axios.get('/api/test')
      .then((res) => {
      	// success
      })
      .catch((err) => {
      	// error
      });
    }
  }
}

 

Global에서 공통으로 들어가는 코드들을 설정하여 코드를 더욱 깔끔하게 작성할 수 있습니다!

 

Reference

• Axios