详解vue前后台数据交互vue(3)

如果最终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。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjfgs.html