vue axios 사용하여 서버 통신

웹이나 앱에서는 종종 내용을 서버에 저장하고 저장된 내용을 불러다가 사용자에게 보여주는데 이 때 javascript에는 axios라는 플러그인을 사용한다.

axios는 javascript에서도 많이 사용되며 Vue.js에서도 많이 활용되고 있는 플러그인이다.

 

axios는 Promise 기반의 자바스크립트로 비동기 방식으로 처리된다. 그래서 요청 후 .then()으로 결과 값을 받아 처리한다.

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

/api/data에서 불러온 데이터는 .then()의 res에 담아 처리한다.

 

🤔  axios 설치 방법

1. npm 으로 설치하는 경우

npm install --save axios

2. yarn으로 설치하는 경우

yarn add axios

3. cdn 사용

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

 

 

😣  axios 별칭으로 사용

axios는 REST를 별칭을 이용해서 쉽게 통신할 수 있다.

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

GET(불러오기)

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

axios 요청 시 서버 주소인 '/api/data'로부터 값을 불러옴.

axios.get('/api/data/1')
 .then(res => {
   console.log(`satus code: ${res.status}`);
   console.log(`headers: ${res.headers}`);
   console.log(`data: ${res.data}`);
 })

axios 요청 시 파라미터 정보(/apio/data/1)을 입력하여  하나의 상세 정보를 불러옴.

axios.get('/api/data', {
  params: {title: '타이틀'},
  headers: {'X-Api-Key': 'my-api-key'},
  timeout: 1000 // 1초 이내에 응답이 없으면 에러처리
}).then(res => {
  console.log(res.data);
});

axios 요청 시 파라미터 정보가 아니라 메소드의 두번째 인자인 config 객체로 요청값을 넘길 수 있음.

 

POST(값 입력하기)

axios.post('/api/data', {title: "vue 만세"})
 .then(res => {
  console.log(res.data);
 })

서버의 데이터 리스트의 마지막에 지금 넘기는 정보를 추가한다.

 

PATCH(특정 값 수정하기)

axios.patch('/api/data/2', {title: "vue vue"})
 .then(res => {
  console.log(res.data);
  })

서버의 데이터 리스트 중 3에 해당하는 값이 title을 수정한다.

 

DELETE(특정 값 삭제하기)

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

서버의 데이터 리스트 중 3에 해당하는 값을 삭제한다.

 

🤨  axios로 파일 업로드 하기

axios로 파일을 업로드 하기 위해서는 HTML로 form을 작성한다.

 

HTML

<form method="post" enctype="multipart/form-data" action="/contant./124/photo">
 <input type="file" name="photo" ref="photoImg" />
 <input type="submit" />
</form>

JAVASCRIPT

var data = new FormData();
var file = this.$refs.photoImg.files[0];
data.append('photo', file);

axios.post('/api/data/' + this.no + '/photo', data)
 .then((res) => {
  this.result = res.data;
 })
 .catch((ex) => {
  console.log('사진 업로드 실패', ex);