본문 바로가기

웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다.
axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다.

axiosPromise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다.

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

/api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()res에 담아서 처리하는 식입니다.
여기서는 간단하게 크롬브라우저의 Console화면에 결과값을 보여주게 처리되어 있습니다.

Vue.js 프로젝트에 axios 설치하기

여기까지 찾아오셨다면 아마 nodejs는 이미 설치되어 있을 것이고 그러면 npm이나 yarn을 이용하여 axios를 설치하시면 될 것 같습니다. 설치하는 것은 매우 쉽습니다.
아래의 3가지 방법중 하나만 설치하거나 설정하면 됩니다.

  1. npm 으로 설치하는 경우는 아래의 명령어를 Command창에 입력을 하면 됩니다.
    > npm install --save axios
  2. yarn 으로 설치하는 경우는 아래의 명령어를 입력을 하면 됩니다.
    > yarn add axios
  3. 직접 웹페이지의 <HEAD></HEAD> 영역 안에 입력을 해도 됩니다.
    > <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 (불러오기)

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

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

axios 요청 시 파마메터 정보(/api/todos/1)를 같이 입력하여 정보를 얻어 올 수 있습니다. 위의 것이 리스트를 불러온다면 지금 아래의 요청은 하나의 상세정보를 불러온다고 보시면 됩니다.

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

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

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

POST (값 입력하기)

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

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

PATCH (특정 값 수정하기)

/api/data/3에 값을 입력 할 때 사용합니다.
서버의 데이터 리스트 중 3에 해당 하는 값의 title를 수정합니다.

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

DELETE (특정 값 삭제하기)

/api/data/3에 값을 삭제 할 때 사용합니다.
서버의 데이터 리스트 중 3에 해당 하는 값을 삭제 합니다.

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

axios로 파일 업로드 하기

axios로 파일도 업로드 할 수 있습니다.

먼저 HTML로 아래와 같이 form문을 작성합니다.

HTML코드

여기에서 ref="photoimage"는 중요한 역할을 하니 빼먹으면 안됩니다.

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

JAVASCRIPT 코드

FormData() 객체를 생성하고 this.$refs.photoimage과 같이 ref옵션을 이용해서 필드에 직접 참조를 하여 이미지파일을 가져오고 업로드를 할 수 있습니다.

var data = new FormData();
var file = this.$refs.photoimage.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);
});

어쩌다보니여기까지

고급지게 만들어 저렴하게 배포는 공작소

227
  • 이전 댓글 더보기
  • 프로필사진 나는 김병렬 2020.02.05 16:10
    와.. 신기
  • 프로필사진 코로나 2020.02.06 09:36
    참신하네요
  • 감사합니다
  • 프로필사진 11 2020.02.06 10:59
    오우
  • 프로필사진 11 2020.02.06 11:00
    이거 아이디어 진짜 괜찮네요.... 댓글창 활성화도 잘 될거같구
  • 네~ 제 의도를 간파하셨네요^^ 맞습니다^^
    많은사람들이 댓글을 달아주고 계세요 ㅎㅎ
  • 프로필사진 jbh 2020.02.06 11:30
    혹시 이런 채팅방 기능도 vue로 구현하신건가요..?
  • 구현할수는 있는데 여기 티스토리 댓글창은 디자인만 변경한 것입니다
  • 프로필사진 jbh 2020.02.06 11:32
    채팅방에 대한 소스코드 여쭤볼수 있을까요...?
  • 소스코드는 영업비밀?? 이라 ㅎㅎ
    아직 공개할 예정은 없습니다^^ 이해부탁드립니다
  • 프로필사진 dend 2020.02.06 12:27
    vue에서 url get방식으로 보내온 id값을 Graphql등을 통해 php에서 php배열로 받아볼 수 있는 방법이 있을까요?
  • 제가 PHP는 잘 모르겠습니다
  • 프로필사진 테스트 2020.02.08 14:34
    접속중이신가요
  • 프로필사진 거지같은클라우드 2020.02.10 17:32
    싱기방기
  • ^^ 감사합니다
  • 프로필사진 test 2020.02.10 20:13
    안녕하세요
  • 프로필사진 방구 2020.02.11 16:15
    방구마렵다
  • 뀌셔도 됩니다.
  • 프로필사진 박지우 2020.02.11 21:45
    안뇽하ㅓ세요
  • 안녕하세요 ~~
  • 프로필사진 기생충 2020.02.12 06:57
    ㄱㄴㄷㄹㅁ♬♪♩ㅇ
  • 프로필사진 Ozoom 2020.02.15 16:05
    하이요
  • 반갑습니다
  • 프로필사진 Ozoon 2020.02.15 16:06
    이런 채팅방은 어떻게 구현하셨는지 존경스럽습니다
    관련 자료 갖고계신분 있으시면 공유 부탁드립니다
  • 스킨 판매합니다 ^^
    좌상단 Top영역에 링크 있어요~~
  • 프로필사진 아아 2020.02.15 16:09
    이거 티스토리 기능이군요.. 감사합니다
  • 네~~ 감사합니다
  • 프로필사진 고슴이 2020.02.16 16:45
  • 프로필사진 와 이게? 2020.02.19 16:08
    이게 티스토리 기능이라구요? ㄷㄷ
  • 네 댓글 기능입니다
  • 프로필사진 ksg 2020.02.21 01:24
    헐 신기하다
  • 프로필사진 ㅇㅇ 2020.02.21 13:04
    ㅇㅇ