倒數10天，接下來將介紹Vue生態圈有什麼現成套件。

前面範例講解了如何操作Vue Instance的資料，接下來呢？

何不拿後端現成的資料來玩玩？

有不少選擇

• vue-resource
• Axios
• jQuery ($.ajax, $.get, etc.)
• Fetch API

先來介紹前官方推薦 - vue-resource

有什麼特點？

• 支援 Promise
• 支援 URI Template
• 支援 Interceptors
• 支援 Firefox、Chrome、Safari、Opera、以及IE9+

和Angular的$resource非常相似

如何安裝

同vue.js，可以透過npm、bower安裝

$ npm install vue-resource --save

or

$ bower install vue-resource --save

或透過CDN引用函式庫，適合上網發問用。

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

如何使用

拿大家都熟悉的jQuery，當對照組

$.get('/someUrl', function() {
    /* 成功拿到資料，然後... */
})

$.get('/someUrl')
 .done(function() {
   /* 成功拿到資料，然後... */
 })
 .fail(function() {
   /* 失敗，發生錯誤，然後...*/
 })
 .always(function() {
   /* 不論成功失敗，都做些事 */
 });

vue-resource的GET則是

{
  // GET /someUrl
  this.$http.get('/someUrl').then((response) => {
   /* 成功拿到資料，然後... */
  }, (response) => {
   /* 失敗，發生錯誤，然後...*/
  });
}

/* 支援 Promise 的優點 */
{  
  this.$http.get('/someUrl')
      .then((response) => {
        /* 成功拿到資料，然後... */
      .catch((response) => {
        /* 失敗，發生錯誤，然後...*/
      })
      .finally(() => {
        /* 不論成功失敗，都做些事 */
      });
}

若你使用Webapck/Browserify編譯，記得使用前先載入先前透過npm/bower安裝的plugin

/* 載入並使用Vue Plugin */

import VueResource from 'vue-resource';
/* 等校 var VueResource = require('vue-resource'); */

Vue.use(VueResource);

除了GET，還有對應其他RESTful verbose的API

• get(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])
• delete(url, [options])

跨域用的JSONP

• jsonp(url, [options])

如何定義對應RESTful API的resourse

採用後端框架產生的RESFTful API，通常會有固定模式
透過定義前端resource，可以讓前後端對接更方便，

短短一行產生前端resource

var resource = this.$resource('someItem{/id}');

新產生的resource，預設有這些具有語意的action，比verbose好讀許多。

• get: {method: 'GET'}
• save: {method: 'POST'}
• query: {method: 'GET'}
• update: {method: 'PUT'}
• remove: {method: 'DELETE'}
• delete: {method: 'DELETE'}

{
  var resource = this.$resource('someItem{/id}');

  // GET someItem/1
  resource.get({id: 1}).then((response) => {
    this.$set('item', response.json())
  });

  // POST someItem/1
  resource.save({id: 1}, {item: this.item}).then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });

  // DELETE someItem/1
  resource.delete({id: 1}).then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

後端resource有時改了，我們也可以配合後端，修改前端resource定義

{
  /* 擴充兩組API */
  var customActions = {
    foo: {method: 'GET', url: 'someItem/foo{/id}'},
    bar: {method: 'POST', url: 'someItem/bar{/id}'}
  }

  var resource = this.$resource('someItem{/id}', {}, customActions);

  // GET someItem/foo/1
  resource.foo({id: 1}).then((response) => {
    this.$set('item', response.json())
  });

  // POST someItem/bar/1
  resource.bar({id: 1}, {item: this.item}).then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

下一篇介紹Axios及轉換過程