使用remove或delete方法发送DELETE请求，下面这个请求指定了{/id}。

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

View Demo

使用inteceptor

拦截器可以在请求发送前和发送请求后做一些处理。

基本用法Vue.http.interceptors.push((request, next) => { // ... // 请求发送前的处理逻辑 // ... next((response) => { // ... // 请求发送后的处理逻辑 // ... // 根据请求的状态，response参数会返回给successCallback或errorCallback return response }) })

在response返回给successCallback或errorCallback之前，你可以修改response中的内容，或做一些处理。
例如，响应的状态码如果是404，你可以显示友好的404界面。

如果不想使用Lambda函数写法，可以用平民写法：

Vue.http.interceptors.push(function(request, next) { // ... // 请求发送前的处理逻辑 // ... next(function(response) { // ... // 请求发送后的处理逻辑 // ... // 根据请求的状态，response参数会返回给successCallback或errorCallback return response }) })
示例1

之前的CURD示例有一处用户体验不太好，用户在使用一些功能的时候如果网络较慢，画面又没有给出反馈，用户是不知道他的操作是成功还是失败的，他也不知道是否该继续等待。

通过inteceptor，我们可以为所有的请求处理加一个loading：请求发送前显示loading，接收响应后隐藏loading。

具体步骤如下：

1.添加一个loading组件

<template> <div> <div> <div></div> <div></div> <div></div> </div> </div> </template>

2.将loading组件作为另外一个Vue实例的子组件

var help = new Vue({ el: '#help', data: { showLoading: false }, components: { 'loading': { template: '#loading-template', } } })

3.将该Vue实例挂载到某个HTML元素

<div> <loading v-show="showLoading"></loading> </div>

4.添加inteceptor

Vue.http.interceptors.push((request, next) => { loading.show = true next((response) => { loading.show = false return response }); });

View Demo

示例2

当用户在画面上停留时间太久时，画面数据可能已经不是最新的了，这时如果用户删除或修改某一条数据，如果这条数据已经被其他用户删除了，服务器会反馈一个404的错误，但由于我们的put和delete请求没有处理errorCallback，所以用户是不知道他的操作是成功还是失败了。

你问我为什么不在每个请求里面处理errorCallback，这是因为我比较懒。这个问题，同样也可以通过inteceptor解决。

1. 继续沿用上面的loading组件，在#help元素下加一个对话框

<div> <loading v-show="showLoading" ></loading> <modal-dialog :show="showDialog"> <header slot="header"> <h1>Server Error</h1> </header> <div slot="body"> <p>Oops,server has got some errors, error code: {{errorCode}}.</p> </div> </modal-dialog> </div>

2.给help实例的data选项添加两个属性

var help = new Vue({ el: '#help', data: { showLoading: false, showDialog: false, errorCode: '' }, components: { 'loading': { template: '#loading-template', } } })

3.修改inteceptor

Vue.http.interceptors.push((request, next) => { help.showLoading = true next((response) => { if(!response.ok){ help.errorCode = response.status help.showDialog = true } help.showLoading = false return response }); });

View Demo

总结

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：

使用Vue.http或this.$http

使用Vue.resource或this.$resource

这两种方式本质上没有什么区别，阅读vue-resource的源码，你可以发现第2种方式是基于第1种方式实现的。

inteceptor可以在请求前和请求后附加一些行为，这意味着除了请求处理的过程，请求的其他环节都可以由我们来控制。

参考链接：https://github.com/vuejs/vue-resource/tree/master/docs