1. 程式人生 > >Vue.js之Vue-resource(二)使用resource服務

Vue.js之Vue-resource(二)使用resource服務

vue-resource提供了另外一種方式訪問HTTP——resource服務,resource服務包含以下幾種預設的action:

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

resource物件也有兩種訪問方式:

全域性訪問:Vue.resource
例項訪問:this.$resource

resource可以結合URI Template一起使用,以下示例的apiUrl都設定為{/id}了:

apiUrl: 'http://211.149.193.19:8080/api/customers{/id}'

GET請求
使用get方法傳送GET請求,下面這個請求沒有指定{/id}。

getCustomers: function() {

    var resource = this.$resource(this.apiUrl)
        vm = this.resource.get()
        .then((response) => {
            vm.$set('gridData', response.data)
        })
        .catch
(function(response) { console.log(response) }) }

POST請求
使用save方法傳送POST請求,下面這個請求沒有指定{/id}。

createCustomer: function() {
    var resource = this.$resource(this.apiUrl)
        vm = this.resource.save(vm.apiUrl, vm.item)
        .then((response) => {
            vm.$set('item'
, {}) vm.getCustomers() })
this.show = false }

PUT請求
使用update方法傳送PUT請求,下面這個請求指定了{/id}。

updateCustomer: function() {
    var resource = this.$resource(this.apiUrl)
        vm = this.resource.update({ id: vm.item.customerId}, vm.item)
        .then((response) => {
            vm.getCustomers()
        })
}

{/id}相當於一個佔位符,當傳入實際的引數時該佔位符會被替換。
例如,{ id: vm.item.customerId}中的vm.item.customerId為12,那麼傳送的請求URL為:http://211.149.193.19:8080/api/customers/12

DELETE請求
使用remove或delete方法傳送DELETE請求,下面這個請求指定了{/id}。

deleteCustomer: function(customer){
    var resource = this.$resource(this.apiUrl)
        vm = this.resource.remove({ id: customer.customerId})
        .then((response) => {
            vm.getCustomers()
        })
}