vue-resource实现get,post,jsonp请求
一、vue-resource概述1、 使用:引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script>2、支持的HTTP方法vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:get(url, [options])head(url, [op
·
一、vue-resource概述
1、 使用:引入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
2、支持的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])
3、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回调处理函数 |
credentials | boolean | 表示跨域请求时是否需要使用凭证 |
emulateHTTP | boolean | 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override |
emulateJSON | boolean | 将request body以application/x-www-form-urlencoded content type发送 |
二、代码展示
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="node_modules/vue/dist/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="node_modules/vue-resource/dist/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click = "get">get请求</button>
<button @click = "post">post请求</button>
<button @click = "jsonp">jsonp请求</button>
<p>{{message}}</p>
</div>
<script type="text/javascript">
//Vue.http.options.emulateJSON = true;
new Vue({
el:"#app",
data:{
message:""
},
methods:{
get:function(){
this.$http.get("package.json",{
params:{
user:"123"
},
headers:{
token:"1234"
}
}).then(function(res){
this.message = res.data;
},function(err){
this.message = err;
})
},
post:function(){
this.$http.post("package.json",{
user:"1234"
},{
headers:{
token:"1234"
}
}).then(function(res){
this.message = res.data;
},function(err){
this.message = err;
})
},
jsonp:function(){
this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
params:{
user:"123"
},
headers:{
token:"1234"
}
}).then(function(res){
this.message = res.data;
},function(err){
this.message = err;
})
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献3条内容
所有评论(0)