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

Axios 란?

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

설치

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

1
npm install axios

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

1
2
3
4
5
6
7
8
// yarn
yarn add axios

// bower
bower install axios

// Using unpkg CDN

사용방법

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로 부터 값을 가져올때는 아래와 같이 사용합니다.

GET
1
2
3
4
5
6
7
axios.get('/api')
.then(res => {
console.log(res);
})
.catch(err) => {
console.log(err);
});

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

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

POST (입력하기)

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

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

PATCH (수정하기)

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

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

DELETE (삭제하기)

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

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

Vue 에서 Axios 사용하기

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

main.js
1
2
3
4
5
6
7
8
9
10
11
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

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×