Vue-resource 进阶

vue-resource 在大家绝大部分使用中，可能只是用来异步获取数据，其实它的其他用法还是挺多的，下面笔者就根据自己在Vue项目中的应用来列举一些vue-resource的其他用法。

一、loading实现
loading的出现和消失，无外乎就是在请求发送前出现，在请求结束后消失，所以这里不得不提vue-resource的拦截器interceptors，下图是拦截器的作用原理

interceptors

在请求发出前，可进行一次截断操作，用户自定义；
在接收到响应后，还可进行一次截断操作，可对获取的响应数据进行相应修改(也可不修改，直接return)，然后传递给callback。
具体用法：
Vue.http.interceptors.push((request, next) => {
// 发送请求前
// request包含着请求路径，请求数据，头部信息，请求方式等；
next((response) => {
// 请求完成后 --可在此处对response进行修改 --下属所得将是被修改的response
return response;
});
});
实现loading，抽出单独的loading组件，在项目根组件下进行全局设置，利用v-show 或者 v-if 显示隐藏loading组件
import Vue from 'vue';
Vue.http.interceptors.push((request, next) => {
loadingShow = true; (判断值 loadingShow 自行定义)
next((response) => {
loadingShow = false;
return response;
});
});

二、解决服务器只接收form data (application/x-www-form-urlencoded)数据类型请求的问题
在入口文件 main.js 中进行设置
Vue.http.options.emulateJSON = true; // 放在 Vue.use(VueResource) 之后， （在Vue全局中注册了vue-resource，才有Vue.http.options对象
）
启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type。

三、解决服务器无法处理PUT, PATCH和DELETE这种REST风格的请求的问题
在入口文件 main.js 中进行设置
Vue.http.options.emulateHTTP = true; // 放在 Vue.use(VueResource)之后
启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

这是目前笔者在项目实际用到的一些属性和方法，如果有什么阐述的不当的地方，还望指出！