Vue 에서 Axios를 사용하여 서버통신 해보기

Axios 란?

Axios는 HTTP 클라이언트 라이브러리 중 하나이다.
비동기 방식으로 HTTP 데이터 요청을 실행하고 또한 IE8 이상을 포함한 모든 최신 브라우저를 지원한다.
Axios는 Promise를 기반의 자바스크립트 비동기 처리 방식을 사용합니다.

설치

보통 npm을 통해 설치를 진행합니다.

npm install axios

이밖에도 yarn,bower,CDN 을 통해 설치도 가능합니다.

// yarn
yarn add axios

// bower
bower install axios

// Using unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

사용방법

Axios는 여러가지 별칭 method를 제공하고 있습니다.

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.delete(url[, config])
위에 자주 쓰이는 4가지 이외에도 여러가지 를 지원 하고 있다.
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])
axios.put(url[, data[, config]])

별칭으로 사용하는 경우에는 url, method 및 data 특성을 구성에 지정할 필요가 없습니다.

GET (불러오기)

GET은 말 그대로 서버에서 데이터를 가져오는데 사용합니다. 많이 사용하는 명령어 중에 하나입니다.
서버 주소 /api로 부터 값을 가져올때는 아래와 같이 사용합니다.

axios.get('/api')
  .then(res => {
    console.log(res); 
  })
  .catch(err) => {
    console.log(err);
  });

axios 요청할 때 메소드의 두번째 인자인 config 객체에 요청값을 같이 넘길 수 있습니다.

axios.get('/api', {
  params: { title: '타이틀' },
  headers: { 'Content-Type': 'application/json' },
  timeout: 1000  
}).then(res => {
  console.log(res);
  })

POST (입력하기)

서버에 값을 입력 할 때 사용합니다. 서버의 데이터 리스트의 마지막에 넘기는 정보를 추가합니다.

axios.post('/api', { title: '타이틀' })
  .then(res => {
  console.log(res);  
  })

PATCH (수정하기)

서버의 특정 데이터를 수정합니다.

axios.patch('/api', { title: '타이틀변경' })
  .then(res => {
    console.log(res);  
  })

DELETE (삭제하기)

서버의 특정 값을 삭제합니다.

axios.delete('/api/val') //val = 특정 값
  .then(res => {
    console.log(res);  
  })

Vue 에서 Axios 사용하기

vue 에서 axios 를 사용하려면 Vue.prototype에 axios를 추가하면 됩니다. main.js에 아래와 같은 내용을 추가한다.

import Vue from 'vue'
import App from './App.vue'
import axios from '.axios' // import axios

Vue.prototype.$axios = axios; // prototype에 axios 추가

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

위와 같이 작성하면 Vue 인스턴스 내부에서 axios를 따로 import 하지 않아도 this.$axios를 이용해서 사용 할 수 있다.

Reference

https://github.com/axios/axios
https://tuhbm.github.io/2019/03/21/axios/
https://ux.stories.pe.kr/138
https://luji.tistory.com/83