vue-resource向服务器发送http请求

本文主要介绍如何使用基于vue打造的vue-resource.js向服务器发送http请求的基础用法
主要以GET请求和PUT请求为例

GET请求

当我们发送GET请求时,参数是通过url的方式传递的
代码如下:

1
2
3
4
5
6
7
8
9
this.$http({  //this指代vue实例化对象
method:"PUT", //请求方法(大写)
url:"", //请求url
params:{} //url参数
}).then(function(responseTxt){
//响应成功的回调函数
},function(responseTxt){
//响应失败的回调函数
});

PUT请求

当我们发送PUT请求时,参数是通过请求主体(也就是request body)发送的
代码如下:

1
2
3
4
5
6
7
8
9
10
11
this.$http({  //this指代vue实例化对象
method:"PUT", //请求方法(大写)
url:"", //请求url
headers: {"Content-Type":"application/x-www-form-urlencoded"}, //请求头部
body:{}, //请求参数
emulateJSON:true //将request body以application/x-www-form-urlencoded content type发送
).then(function(responseTxt){
//响应成功的回调函数
},function(responseTxt){
//响应失败的回调函数
});

PUT请求url带参问题(拓展知识)

按照严格的http协议来说,发送PUT请求时,参数应该放在request body里
但是有时候参数写在url上也会请求成功,是不是很奇怪呢

代码如下:

1
2
3
4
5
6
7
8
9
this.$http({  //this指代vue实例化对象
method:"PUT", //请求方法(大写)
url:"", //请求url
params:{} //url参数
).then(function(responseTxt){
//响应成功的回调函数
},function(responseTxt){
//响应失败的回调函数
});

出现这种情况的原因有两个:

  1. 实际的http请求并没有严格意义上的那么规范,所以有时不会报错
  2. url参数是有大小限制的,如果参数长度较小,是可以选择url传参的
扫一扫,请老师喝水