如果最终crossOrigin为true并且浏览器不支持CORS,即不支持XMLHttpRequest2时,则会使用XDomainRequest来请求。目前XDomainRequest 只有IE8,IE9 浏览器支持用来进行AJAX跨域。
reqponse对象
response对象包含服务端的数据,以及HTTP响应状态,响应头等信心。
data (对象或字符串): 服务端返回的数据,已使用 JSON.parse 解析。
ok(布尔值):当HTTP响应状态码在200~299区间时该值为true,表示响应成功。
status(数值): HTTP响应状态码。
statusText(字符串): HTTP响应状态文本描述。
headers(函数): 获取HTTP响应头信息,不传参表示获取整个响应头,返回一个相应头对象。传参表示获取对应的响应头信息。
request(对象)
RESTful调用
RESTful调用就是客户端通过HTTP动词来表示增,删,改,查实现对服务端数据操作的一种架构模式。
vue-resource提供全局调用Vue.resource或者在组件实例上调用this.$rsource。
resource(url ,[params], [actions], [options]);
url
url(字符串)请求地址,可以包含占位符,会被parms对象中的同名属性的值替换。
this.$resource('/books/{cat}', { cat: 1 }); // 解析的URL为:/books/1
params
params(可选,对象)
参数对象,可用来提供url中的占位符,多出来的属性拼接url的查询参数。
actions
actions(可选,对象)
可以用来对已有的action进行配置,也可以用来定义新的action。
默认的aciton配置为:
Resource.actions = { get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'delete'}, delete: {method: 'DELETE'} }
修改默认值action配置
this.$resource( '/books/{cat}', { cat: 1 }, { charge: { method: 'POST', params: { charge: true } } });
actions对象中的单个action如charge对象可以包含options中的所有属性,且有限即高于iotions对象
options
options(可选,对象)
resource方法执行后返回一个包含了所有action方法名的对象。其包含自定义的action方法
resource请求数据
var resouce = this.$resource('/books/{id}'); // 查询 // 第一个参数为params对象,优先级高于resource发方法的params参数 resoure.get({id: 1}).then(function ( response ) { this.$set('item', response.item); }); // 保存 // 第二个参数为要发送的数据 resource.seve({id: 1}, {item: this.item}).then(function () { // 请求成功回调 }, function () { // 请求失败回调 }); resource.delete({id: 1}).then(function () { // 请求成功回调 }, function () { // 请求失败回调 });
拦截器
可以全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。
拦截器的注册
Vue.http.interceptors.push({ request: function ( request ) { // 更改请求类型为POST request.method = 'POST'; return request; }, response: function ( response ) { // 修改返回数据 response.data = [{ custom: 'custom' }]; return response; } });
工厂函数注册
Vue.http.interceptors.push(function () { return { request: function ( request ) { return request; }, response: function ( response ) { return response; } } }); Vue.http.interceptors.push(function ( request, next ) { // 请求发送前的处理逻辑 next(function () { // 请求发送后的处理逻辑 // 更具请求的状态, response参数会返回给 successCallback或errorCallback return response }); });
实现的功能:
AJAX请求的loading界面
Vue.http.interceptors.push((request, next) => { // 通过控制 组件的`v-show`值显示loading组件 loading.show = true; next((response) => { loading.show = false return response }); });
请求失败时的提示对话框
跨域AJAX
vue-resource中用到的CORS特性,和 XHMLHttpRequest2的替代品 XDomainRequest
XDomain只支持GET和POST两种请求。如果要在vue-resource中使用其它方法请求,设置请求选项的emulateHTTP为true。
XHMLHttpRequest2 CORS
XHMLHttpRequest2提交AJAX请求还是和普通的XMLHttpRequset请求一样,只是增加了一些新特性。
在提交AJAX跨域请求时,需要知道当前浏览器是支持XHMLHttpRequest2, 判断方法使用 in操作符检测当前 XMLHttpRequest实例对象是否包含 withCredentials属性,如果包含则支持CORS
var xhrCors = 'withCredentials' in new XMLHttpRequest();
在支持CORS的情况下,还需啊哟服务端启用CORS支持。
例如:
需要从:8080提交到,需要在添加响应头
Access-Control-Allow-Origin: *
XDomainRequest
如果vue0resource不支持XMLHttpRequest2,则会降级使用用XDomainRequest
Promise
vue.resource基本HTTP调用和RESTful调用action方法执行后都会返回一个Promise对象。该Promise对象提供了then,catch,finally。