vue.js: http via Vue Resource

Vue Resource

• 공식 github page

Vue Resource 설치하기

npm으로 설치하기

npm install --save vue-resource

cdn

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>

Vue Resource 전역에 불러오기

main.js

import Vue from 'vue'
import VueResource from 'vue-resource';
import App from './App.vue'

Vue.use(VueResource);

new Vue({
  render: h => h(App)
})

Post server data

이번 예시에서는 간단하게 filebase database를 사용해 보겠다. (Firebase 콘솔에서 아주 쉽게 데이터베이스를 만들 수 있다. 간단한 테스트 용도로는 무료로 사용이 가능하다.)

<template>
  <div>
    <h1>Http testing</h1>
    <div>
      <label for="">Username</label>
      <input type="text" v-model="user.username">
    </div>
    <div>
      <label for="">Email</label>
      <input type="text" v-model="user.email">
    </div>
    <button v-on:click="submitUser">Submit</button>
    <hr>
    <button v-on:click="getUser">Get</button>
    <hr>
    <ul>
      <li v-for="user in users"> - </li>
    </ul>

  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        user: {
          username: '',
          email: ''
        },
        users: []
      }
    },
    methods: {
      submitUser() {
        this.$http.post("https://vuejs-http-a808a.firebaseio.com/data.json", this.user)
          .then(response => {
            console.log(response)
          }, error => {
            console.log(error)
          });
      },
    getUser() {
      this.$http.get("https://vuejs-http-a808a.firebaseio.com/data.json")
        .then(response => {
          return response.json()
        })
        .then(data => {
          const resultArray = [];
          for (let key in data) {
            resultArray.push(data[key]);
          }
          this.users = resultArray;
        });
    }
    }
  }
</script>

vue-resource의 this.$http를 활용해서 get, post request를 보낼 수 있고, 이를 vue data로 쉽게 바인딩 시킬 수 있다.

Vue resource의 Global options 설정하기

main.js에 vue-resource의 다양한 옵션들을 설정할 수 있다.

가장 대표적으로 root 옵션을 사용해서 데이터를 호출할 api를 지정 해 놓을 수 있다.

더 많은 설정들에 대해서는 vue-resource Configuration 문서를 참고.

main.js

Vue.http.options.root = "https://vuejs-httpfirebaseio.com/"

Intercept request

request 요청을 보낼 때 vue-resource를 사용해서 request에 접근이 가능하다! (프론트 프레임워크의 발전이 정말로 대단하다.)

POST 요청을 받으면 이를 PUT으로 변경시켜보자.

main.js

Vue.http.interceptors.push((request, next) => {
  console.log(request);
  if (request.method == 'POST') {
    request.method = 'PUT';
  }
  next();
});

Intercept response

request와 마찬가지로 resopnse에도 접근이 가능하다. (production level에서는 하지 않는 것을 권장)

Vue.http.interceptors.push((request, next) => {
  console.log(request);
  if (request.method == 'POST') {
    request.method = 'PUT';
  }
  next(response => {
    response.json = () => { return {message: response.body}  }
  });
})