vue resource发送请求的几种方式
更新时间：2019年09月30日 09:45:06 作者：angle-xiu
这篇文章主要介绍了vue resource发送请求的几种方式，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue resource发送请求，代码如下所示；
<!DOCTYPE html>
<html>
<head>
<title>vue-resource</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
</div>
</body>
<!-- 基于vue-resource实现get post请求 也可利用axios第三方包实现-->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
<script>
// vue-promise是基于vue的,所以引入CDN库时需要注意顺序，应先引入vue
let vm = new Vue({
el: "#app",
data:{
},
methods:{//vue-resource发送请求是基于promise的
getInfo(){
this.$http.get('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')
.then(res=>{
console.log(res);
})
},
postInfo(){
this.$http.post('https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/upload',{},{
emulateJSON:true//设置这个参数相当于application/x-www-form-urlencoded，由于手动提交请求没有默认表单格式，需要设置发送的数据格式
})
.then(res=>{
console.log(res.body);
})
},
}
});
</script>
</html>
知识点扩展；vue-resource请求的几种方式
安装import VueResource from 'vue-resource'
Vue.use(VueResource)
get //获取
getdesignatepl({commit,rootState}){
// console.log("ppppp")
let designate_list = `schedule-plan-configuration`;
Vue.http.get(api.get(designate_list),{headers:rootState.headers}).then(function(response){
let pup=response.data.data;
// console.log(response)
},function(response){
// console.log("pl")
var tipsObj = {
title : "数据错误",
flag: true,
type: 4,
btnGroup:['ook']
}
commit('popup',tipsObj,{root:true});
})
}
post//新增
setAdd({commit,rootState,state,dispatch,context},mss){
Vue.http.post(api.save('schedule-plan-configuration'),mss,{headers:rootState.headers}).then(function(response){
dispatch("getdesignatepl")
commit('popup',titleObj,{root:true});
},function(response){
if(response.status == 422){
commit('popup',tipsObj,{root:true});
}
})
},
//删除
BrDelete(context,obj){
let br_delete_put_data = `schedule-plan-configuration/${obj.id}`
Vue.http.delete(api.get(br_delete_put_data),{headers:context.rootState.headers}).then(function(response){
context.dispatch("getdesignatepl");
},function(response){
// console.log(response);
if(response.status == 401 || response.status == 500){
var tipsObj = {
status: response.status,
flag: true,
type: 4,
btnGroup:['ook']
}
context.commit('popup',tipsObj,{root:true});
return;
}
})
},
// 跟新
getEntrySales({commit,rootState,dispatch,context},obj){
// console.log(obj.id)
Vue.http.put(api.update(`schedule-plan-configuration/${obj.id}`),obj,
{headers:rootState.headers}).then(function(response){
dispatch("getdesignatepl");
},function(response){
})
},
总结
以上所述是小编给大家介绍的vue resource发送请求的几种方式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了VueJs与ReactJS和AngularJS的异同点,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
vue Element UI扩展内容过长使用tooltip显示
这篇文章主要为大家介绍了vue Element UI扩展内容过长使用tooltip展示鼠标hover时的提示信息，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了Vue组件实现评论区功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了关于Element-UI可编辑表格的实现过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文主要介绍了vue处理get/post的http请求的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue+Elementui el-tree树只能选择子节点并且支持检索功能
这篇文章给大家介绍了Vue+Element UI el-tree树只能选择子节点并且支持检索的文章,通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-12-12
本篇文章主要介绍了使用vue-cli（vue脚手架）快速搭建项目的方法，vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了vue项目中如何调用多个不同的ip接口，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论