vue-resource 在大家绝大部分使用中,可能只是用来异步获取数据,其实它的其他用法还是挺多的,下面笔者就根据自己在Vue项目中的应用来列举一些vue-resource的其他用法。
一、loading实现
loading的出现和消失,无外乎就是在请求发送前出现,在请求结束后消失,所以这里不得不提vue-resource的拦截器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方法。
这是目前笔者在项目实际用到的一些属性和方法,如果有什么阐述的不当的地方,还望指出!