详解vue前后台数据交互vue-resource文档

2020-06-13 10:41:31易采站长站整理

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

如果服务器无法处理PUT,PATCH和DELETE的请求。可以启用enulateHTTP。
启用之后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法


Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布尔值)
默认值为:false,当值为true并且data为对象时,设置请求头Content-Type的值为application/x-www-form-urlencoded

如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。


Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin(布尔值)

默认值为:null,表示是否跨域,如果没有设置该属性,vue-resource内部会判断浏览器当前URL和请求URL是否跨域。


if ( request.crossOrgin === null ) {
request.corssOrigin = corssOrigin(request);
}
if ( request.corssOrigin ) {
if ( !xhrCors ) {
request.client = xdrClient;
}
request.enumlateHTTP = false;
}

如果最终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 });