VUE HTTP调用方式总结
一、vue-resource1、引入资源方式1)下载vue-resource.js,添加到项目中2)CDN:http://www.bootcdn.cn/vue-resource/3)npm install vue-resource 即可 。然后在main.js中配置import VueResource from ‘vue-re
一、vue-resource
1、引入资源方式
1)下载vue-resource.js,添加到项目中
2)CDN:http://www.bootcdn.cn/vue-resource/
3)npm install vue-resource 即可 。然后在main.js中配置import VueResource from ‘vue-resource’; 然后用Vue.use(VueResource) 方法启用插件。
2、使用$http,直接封装在methods中
1)get方式
this.$http.get('url',{
param1:value1,
param2:value2
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
});
2)post方式
this.$http.post('url',{
param1:value1,
param2:value2
},{
emulateJSON:true
}).then(function(response){
// response.data中获取ResponseData实体
},function(response){
// 发生错误
});
注:put、delete类似
二、axios
1、引入资源方式
1)下载axios.min.js,添加到项目中
2)使用CDN:
3)npm方式: npm install axios
2、使用axios,直接封装在methods中
1)get方式
axios.get('url', {
params: {
param1: value1,
param2:value2
}
}).then(function (response) {
// response.data中获取ResponseData实体
}).catch(function (error) {
// 发生错误
});
2)post方式:默认json格式
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
// response.data中获取ResponseData实体
}).catch(function (error) {
// 发生错误
});
注:put、delete类似
三、ajax
1、引入资源方式
1)下载jquery.min.js,添加到项目中 http://jquery.com/download/
2)使用CDN:
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、使用方式,直接封装在method中
$.ajax({
url:'url',
type:'POST', //GET、PUT、DELETE
async:true, //是否异步
data:{
name:'zhang',
age:28
},
timeout:5000, //超时时间
dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
// 发送前处理
},
success:function(data,textStatus,jqXHR){
// 调用成功,解析response中的data到自定义的data中
},
error:function(xhr,textStatus){
// 调用时,发生错误
},
complete:function(){
// 交互后处理
}
})
更多推荐
所有评论(0)