vue-resource 初学笔记 - vue

安装：

JavaScript Code复制内容到剪贴板

npm install vue-resource

使用（实例未引入也是可以使用的）

JavaScript Code复制内容到剪贴板

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

JavaScript Code复制内容到剪贴板

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
// 响应成功回调
}, (response) => {
// 响应错误回调
});

支持的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])

客户端请求方法	服务端处理方法
`this.$http.get(...)`	`Getxxx`
`this.$http.post(...)`	`Postxxx`
`this.$http.put(...)`	`Putxxx`
`this.$http.delete(...)`	`Deletexxx`

options对象

发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormData string	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

demo：

JavaScript Code复制内容到剪贴板

// Lambda写法
this.$http.get('http://study2.ccc/api.php',{params:{'act':'getCategory'}}).then((response) => {
Indicator.close();
console.log(response.data);
this.data = response.data;
// 响应成功回调
}, (response) => {
console.log('error');
// 响应错误回调
});

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。Vue.http.options.emulateJSON = true;

response对象包含以下属性：

方法	类型	描述
text()	string	以string形式返回response body
json()	Object	以JSON对象形式返回response body
blob()	Blob	以二进制形式返回response body
ok	boolean	响应的HTTP状态码在200~299之间时，该属性为true
status	number	响应的HTTP状态码
statusText	string	响应的状态文本
headers	Object	响应头

本文来自于：http://www.yoyo88.cn/study/vue/156.html

上一篇 Vuex 初学笔记 / store

下一篇 vue文档 —— 模板语法整理