Vue 进阶（幺伍肆）：vue-resource 应用

关注

发布于: 刚刚

一、前言

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：

使用Vue.http或this.$http
使用Vue.resource或this.$resource

这两种方式本质上没有什么区别，阅读vue-resource的源码可以得知，第 2 种方式其实是基于第 1 种方式实现的。

此外，vue-resource还提供了拦截器：inteceptor可以在请求前和请求后附加一些行为，这意味着除了请求处理的过程，请求的其他环节都可以由我们来控制。

在Vue.js中，完成ajax请求的方式有两种：vue-resource和 axios。

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。有关 axios应用详参博文：

二、vue-resource 特点

体积小：vue-resource非常小巧，在压缩以后只有大约 12KB，服务端启用gzip压缩后只有 4.5KB 大小，这远比jQuery的体积要小得多。
支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE9以下的浏览器，其他主流的浏览器都支持;
支持Promise API和URI Templates：Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板;
支持拦截器：拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共用的处理方式。有关拦截器的具体应用，详参《Vue进阶（幺伍伍）：vue-resource 拦截器interceptors使用》。

三、基本语法

引入vue-resource后，可以基于全局Vue对象使用http，也可以基于某个Vue实例使用http。

基于全局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);

复制代码

以下是一个简单的get应用示例：

// GET /someUrl  this.$http.get('/someUrl').then(response => {    // success callback  }, response => {    // error callback  });

复制代码

四、http 方法列表

vue-resource的请求API是按照REST风格设计的，它提供了 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])

除了jsonp以外，另外 6 种的API名称都是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

options对象发送请求时的options选项对象包含以下属性：
Response返回对象的参数以及对象的方法如下：

五、示例代码

简单的post提交

{  // POST /someUrl  this.$http.post('/someUrl', {foo: 'bar'}).then(response => {    // get status    response.status;    // get status text    response.statusText;    // get 'Expires' header    response.headers.get('Expires');    // get body data    this.someData = response.body;  }, response => {    // error callback  });}

复制代码

带查询参数和自定义请求头的GET请求:在这里插入代码片

{// GET /someUrl?foo=barthis.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {  // success callback}, response => {  // error callback});}

复制代码

获取图片并使用blob()方法从响应中提取图片的主体内容。

// GET /image.jpgthis.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {  // resolve to Blob  return response.blob();}).then(blob => {  // use image Blob});

复制代码

六、安装

npm install vue-resource --save

复制代码

–save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后，可以查看package.json文件，会发现多了"vue-resource": "^1.3.4"的配置。具体如下：

"dependencies": {    "vue": "^2.3.3",    "vue-resource": "^1.3.4",    "vue-router": "^2.7.0"  },

复制代码

七、应用

通过以上步骤，已经安装好了vue-resource，但是在vue-cli中我们如何使用呢？

首先，我们需要在main.js文件中导入并注册vue-resource:

import VueResource from 'vue-resource'Vue.use(VueResource)

复制代码

八、resource 服务应用

vue-resource提供了另外一种方式访问HTTP——resource服务，resource服务包含以下几种默认的action：

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

1、resource对象也有两种访问方式：全局访问和局部访问。

//全局访问Vue.resource//局部访问this.$resource

复制代码

可以结合URI Template一起使用，以下示例的 apiUrl 都设置为{/id}了：

apiUrl: 'http://22.189.25.95:8080/api/customers{/id}'

复制代码

{/id}相当于一个占位符，当传入实际的参数时该占位符会被替换。例如，{ id: vm.item.customerId}中的vm.item.customerId为 12，那么发送的请求 URL 为：'http://22.189.25.95:8080/api/customers/12'

2、使用实例

//使用get方法发送GET请求，下面这个请求没有指定{/id}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);    })}//使用save方法发送POST请求，下面这个请求没有指定{/id}createCustomer: function() {    var resource = this.$resource(this.apiUrl),        vm = this;    resource.save(vm.apiUrl, vm.item).then((response) => {        vm.$set('item', {});        vm.getCustomers();    });    this.show = false;}

//使用update方法发送PUT请求，下面这个请求指定了{/id}updateCustomer: function() {    var resource = this.$resource(this.apiUrl),        vm = this;    resource.update({        id: vm.item.customerId    }, vm.item).then((response) => {        vm.getCustomers();    })}

复制代码

九、拓展阅读

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/faf670ae9ad6db2d758454674】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺伍肆）：vue-resource 应用

一、前言

二、vue-resource 特点

三、基本语法

四、http 方法列表

五、示例代码

六、安装

七、应用

八、resource 服务应用

九、拓展阅读

No Silver Bullet

评论