vue.resource是什么

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



本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

vue-resource特点

vue-resource插件具有以下特点：

1. 体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2. 支持主流的浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3. 支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。

URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。

拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue-resource使用

引入vue-resource#

1

2





基本语法#

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

1

2

3

4

5

6

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

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

1

2

3

4

5

6

7

8

9

10

11

12

// 传统写法

this.$http.get('/someUrl', [options]).then(function(response){

// 响应成功回调

}, function(response){

// 响应错误回调

});

// Lambda写法

this.$http.get('/someUrl', [options]).then((response) => {

// 响应成功回调

}, (response) => {

// 响应错误回调

});

相关免费学习推荐：javascript（视频）