[Vue] Vue axios

in JS Technology on Vue.js
[Vue] Vue axios

Vue에서 axios 설정

1. 개요

vue 에서 axios를 설치하고 설정하는 방법에 대해서 알아봅니다.

axios 가 무엇이고 왜 axios를 선택해야하는지 아래의 링크를 참조하세요

axios 관련 포스트 링크 : axios

2. 설치

Vue 프로젝트에 axios 를 설치하는 방법은 cdn, npm, yarn 방식이 있지만 이 글에서는 npm 방식으로 설치해 보겠습니다.

Vue 프로젝트 경로에서 다음과 같은 명령어를 입력하세요

 $ npm install --save axios

설치가 완료되었으면 package.json 파일에 axios 가 설치된 것을 보실 수 있습니다.

vue

3. 사용법

axios 사용법은 다양하기 때문에 간단하게 rest 메서드 기준으로 살펴보겠습니다.

자세한 사용법은 axios github 사이트를 참고하세요

axios의 간단한 사용법은 다음과 같습니다.

  • 불러오기 : axios.get(url[, config])
  • 입력하기 : axios.post(url[, data[, config]])
  • 수정하기 : axios.patch(url[, data[, config]])
  • 삭제하기 : axios.delete(url[, config])

1. GET

GET은 서버로 부터 데이터를 가져오는데 사용합니다. 아마도 가장많이 사용하는 명령어 일 것입니다. 서버 주소인 /api/data로 부터 값을 불러올 때 사용합니다.

//get 사용방식
axios.get('/api/data').then(res => { 
  // 불러온 값을 Console에 뿌려줍니다. 
  console.log(res.data) })

위의 소스코드는 get을 활용한 axios 사용 방식입니다.

2. POST

Post는 rest기준 Create 성격을 띄지만 만능으로 사용됩니다.

axios.post('/api/data', {title: "vue.js는 조으다."})
.then(res => { console.log(res.data) })

3. PUT

PUT은 자원을 대체될때 많이사용 됩니다. 사용방법은 아래와 같습니다.

axios.put('/api/data/3', {title: "vue.js는 조으다."})
.then(res => { console.log(res.data) })

4. Delete

delete는 값을 삭제 할 때 사용됩니다.

axios.delete('/api/data/3') 
.then(res => { console.log(res.data) })

© 2021. All rights reserved.