vue resource发送请求的几种方式
时间：2021-03-18 09:44:27|栏目：vue|点击： 次
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-cli 3如何使用vue-bootstrap-datetimepicker日期插件
栏 目：vue
下一篇：vue实现多个echarts根据屏幕大小变化而变化实例
本文地址：http://www.codeinn.net/misctech/82942.html
