VUEHTTP调用方式总结

一、vue-resource
1、引入资源方式
1&＃xff09;下载vue-resource.js&＃xff0c;添加到项目中
2&＃xff09;CDN&＃xff1a;http://www.bootcdn.cn/vue-resource/
3&＃xff09;npm install vue-resource 即可 。然后在main.js中配置import VueResource from ‘vue-resource’; 然后用Vue.use(VueResource) 方法启用插件。
2、使用$http&＃xff0c;直接封装在methods中
1&＃xff09;get方式

this.$http.get(&＃39;url&＃39;,{param1:value1, param2:value2 }).then(function(response){ // response.data中获取ResponseData实体},function(response){ // 发生错误});

2&＃xff09;post方式

this.$http.post(&＃39;url&＃39;,{ param1:value1, param2:value2 },{ emulateJSON:true }).then(function(response){ // response.data中获取ResponseData实体},function(response){ // 发生错误});

注&＃xff1a;put、delete类似

二、axios
1、引入资源方式
1&＃xff09;下载axios.min.js&＃xff0c;添加到项目中
2&＃xff09;使用CDN&＃xff1a;
3&＃xff09;npm方式&＃xff1a; npm install axios
2、使用axios&＃xff0c;直接封装在methods中
1&＃xff09;get方式

axios.get(&＃39;url&＃39;, {params: {param1: value1,param2:value2}}).then(function (response) {// response.data中获取ResponseData实体}).catch(function (error) {// 发生错误});

2&＃xff09;post方式&＃xff1a;默认json格式

axios.post(&＃39;/user&＃39;, {firstName: &＃39;Fred&＃39;,lastName: &＃39;Flintstone&＃39;}).then(function (response) {// response.data中获取ResponseData实体}).catch(function (error) {// 发生错误});

注&＃xff1a;put、delete类似

三、ajax
1、引入资源方式
1&＃xff09;下载jquery.min.js&＃xff0c;添加到项目中 http://jquery.com/download/
2&＃xff09;使用CDN&＃xff1a;
https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js
2、使用方式&＃xff0c;直接封装在method中

$.ajax({url:&＃39;url&＃39;,type:&＃39;POST&＃39;, //GET、PUT、DELETEasync:true, //是否异步data:{name:&＃39;zhang&＃39;,age:28},timeout:5000, //超时时间dataType:&＃39;json&＃39;, //返回的数据格式&＃xff1a;json/xml/html/script/jsonp/textbeforeSend:function(xhr){// 发送前处理},success:function(data,textStatus,jqXHR){// 调用成功&＃xff0c;解析response中的data到自定义的data中},error:function(xhr,textStatus){// 调用时&＃xff0c;发生错误},complete:function(){// 交互后处理}
})