浏览器与服务器的交互原理解析(四)-------使用vue-resource进行异步请求
2018-01-10 16:47
826 查看
vue相对于jquery和原生js来说, 通过产生虚拟DOM, 将前端攻城狮从原来繁琐的DOM操作中解放出来, 相应的, ajax基于对DOM节点的操作,进行数据请求的方式在vue中就被弃用了. 转而使用了vue-resource插件, 该插件可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor全局拦截功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。
head(url, [options]);
delete(url, [options]);
jsonp(url, [options]);
post(url, [body], [options]);
put(url, [body], [options]);
patch(url, [body], [options])
其中: url是请求地址,字符串类型, 可被options对象中url属性覆盖。
data是要发送的数据, 可以是字符串或者对象类型, 可被options对象中的data属性覆盖。
options中的参数配置如下:
data (对象或字符串): 服务端返回的数据,已使用 JSON.parse 解析
ok(布尔值):当HTTP响应状态码在200~299区间时该值为true,表示响应成功
status(数值): HTTP响应状态码
statusText(字符串): HTTP响应状态文本描述
headers(函数): 获取HTTP响应头信息,不传参表示获取整个响应头,返回一个相应头对象。传参表示获取对应的响应头信息
3. 方法使用实例:
GET方法:
POST方法:
JSONP方法:
DELETE请求:
2. vue-resource提供了另外一种方式访问HTTP——resource服务,resource服务包含以下几种默认的action:
默认的aciton配置为:
Resource.actions = {
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}
}
3. resource对象也有两种访问方式:
全局访问:Vue.resource
实例访问:this.$resource
4. 应用实例:
2. 拦截器使用实例: 加载loading插件
关于vue-resource差不多内容都涵盖了, 虽然已经不是官方推荐的插件了, 但是还是有它自身的优点, 关于跨域的处理,另写博客再做详细分析;
好文共享: Vue.js——vue-resource全攻略
vue前后台数据交互vue-resource文档
一. vue-resource基于底层式get/post请求, 封装了7中请求API
get(url, [options]);head(url, [options]);
delete(url, [options]);
jsonp(url, [options]);
post(url, [body], [options]);
put(url, [body], [options]);
patch(url, [body], [options])
其中: url是请求地址,字符串类型, 可被options对象中url属性覆盖。
data是要发送的数据, 可以是字符串或者对象类型, 可被options对象中的data属性覆盖。
options中的参数配置如下:
参数 | 数据类型 | 描述 |
---|---|---|
url | string | 请求的URL地址 |
method | string | 默认值为GET,请求的HTTP方法(GET,POST等) |
body | Object, FormDatastring | 默认值为:' ',需要发送给服务端的数据, data属性的值对method为POST,PUT,DElETE等请求会作为请求体来传送,对于GET,JSONP等方式的请求将会拼接在URL查询参数中。 |
params | Object | 默认值为:{ } 用来替换url中的模板变量,模板变量中为匹配到的属性添加在URL地址后边作为查询参数。例如: Vue.http({ url: 'http://example.com/{book}', params: { book: 'vue', cat: 1 } }); 最终url为: http//example.com/vue?cat=1 |
headers | Object | 默认值为:{ },设置HTTP请求头 |
timeout | number | 默认为:0,单位为 ms。表示请求超时时间。0表示没有超时限制。超时后,将会取消当前请求。 |
before | function(request) | 默认值为:null,该函数接受请求选项对象作为参数。该函数在发送请求之前执行,vue-resource内部在拦截器最前端调用该方法。 |
progress | function(event) | ProgressEvent回调处理函数 |
credentials | boolean | 表示跨域请求时是否需要使用凭证 |
emulateHTTP | boolean | 默认值为:false,当值为true是,用HTTP的POST方式PUT,PATCH,DELETE等请求,并设置请求头字段HTTP_Method_Override为原始请求方法。 |
emulateJSON | boolean | 默认值为:false,当值为true并且data为对象时,设置请求头Content-Type的值为application/x-www-form-urlencoded |
二. 返回的Response对象
response对象包含服务端的数据,以及HTTP响应状态,响应头等信息。data (对象或字符串): 服务端返回的数据,已使用 JSON.parse 解析
ok(布尔值):当HTTP响应状态码在200~299区间时该值为true,表示响应成功
status(数值): HTTP响应状态码
statusText(字符串): HTTP响应状态文本描述
headers(函数): 获取HTTP响应头信息,不传参表示获取整个响应头,返回一个相应头对象。传参表示获取对应的响应头信息
三. vue-resource的使用
1. 在vue单文件中的使用:<script src="../js/vue.js"></script> <script src="../js/vue-resource.js"></script> // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);2. 在vue-cli中使用:
//安装模块包 npm install vue-resource --save //然后在main.js(入口文件)中引入并注册 import Vue from 'vue'; import VueResource from 'vue-resource' Vue.use(VueResource);
3. 方法使用实例:
GET方法:
getCustomers: function() { var vm = this vm.$http.get(vm.apiUrl) .then((response) => { vm.$set('gridData', response.data) }) },
POST方法:
createCustomer: function() { var vm = this vm.$http.post(vm.apiUrl, vm.item) .then((response) => { vm.$set('item', {}) vm.getCustomers() }) this.show = false }
JSONP方法:
getCustomers: function() { this.$http.jsonp(this.apiUrl).then(function(response){ this.$set('gridData', response.data) }) }PUT请求:
updateCustomer: function() { var vm = this vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item) .then((response) => { vm.getCustomers() }) }
DELETE请求:
deleteCustomer: function(customer){ var vm = this vm.$http.delete(this.apiUrl + '/' + customer.customerId) .then((response) => { vm.getCustomers() }) }
四. RESTful调用: Resource
1. RESTful调用就是客户端通过HTTP动词来表示增,删,改,查实现对服务端数据操作的一种架构模式2. vue-resource提供了另外一种方式访问HTTP——resource服务,resource服务包含以下几种默认的action:
默认的aciton配置为:
Resource.actions = {
get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}
}
3. resource对象也有两种访问方式:
全局访问:Vue.resource
实例访问:this.$resource
4. 应用实例:
getCustomers: function() { var resource = this.$resource(this.apiUrl) vm = this resource.get() .then((response) => { vm.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) }
五. 实现全局拦截
1. 注册拦截器:Vue.http.interceptors.push((request, next) => { // ... // 请求发送前的处理逻辑 // ... next((response) => { // ... // 请求发送后的处理逻辑 // ... // 根据请求的状态,response参数会返回给successCallback或errorCallback return response; }) })
2. 拦截器使用实例: 加载loading插件
Vue.http.interceptors.push((request, next) => { // 通过控制 组件的`v-show`值显示loading组件 loading.show = true; next((response) => { loading.show = false return response }); });
关于vue-resource差不多内容都涵盖了, 虽然已经不是官方推荐的插件了, 但是还是有它自身的优点, 关于跨域的处理,另写博客再做详细分析;
好文共享: Vue.js——vue-resource全攻略
vue前后台数据交互vue-resource文档
相关文章推荐
- 浏览器与服务器的交互原理解析(五)-------使用axios进行异步请求
- 浏览器与服务器的交互原理解析(三)-------使用Ajax进行异步请求
- JSON(四)——异步请求中前后端使用Json格式的数据进行交互
- 浏览器与服务器的交互原理解析(二)
- 在AngularJS中是如何实现异步请求的?(与服务器进行交互)
- 使用vue-resource进行数据交互的实例
- 使用vue-resource进行数据交互
- responseXML 属性 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: 请求 books.xml 文件,并解析响应:
- 使用vue-resource进行数据交互
- 使用XMLHttpRequest进行浏览器和服务器的交互
- 浏览器与服务器的交互原理解析(一)
- 使用vue-resource进行数据交互
- 使用XML与远程服务器进行交互
- 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求
- I/O模型和原理,以及简单解析客户端请求WEB服务器内部处理过程,MPM三种模
- Ajax入门(与Java服务器交互)(三)——解析XML数据、使用级联下拉选择框
- jQuery_review之使用$.getScript()以及$.getJSON来与服务端进行异步信息交互
- ajax异步请求服务器(不使用任何框架)
- 使用JSch进行SSH交互(服务器对私钥公钥都鉴权)
- [置顶] Asp.Net底层原理(一、浏览器和服务器的交互原理)