iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

Vue.js 30天系列 第 20

Vue.js 20 - Ajax取得資料 - vue-resource

倒數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,可以透過npmbower安裝

$ 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及轉換過程


上一篇
Vue.js 19 - 組件/元件(Component) - 其他補充
下一篇
Vue.js 21 - Ajax取得資料 - Axios篇
系列文
Vue.js 30天30

2 則留言

0
yowlonglee
iT邦新手 5 級 ‧ 2018-09-10 11:11:16

官方已經沒再推 vue-resource 了。

看到下一篇已經有提到這件事,哈哈。

0
wayneli
iT邦新手 5 級 ‧ 2018-11-06 11:35:24

/* 支援 Promise 的優點 */的
範例 then好像少了})

我要留言

立即登入留言