JavaScript

超轻量级php框架startmvc

vue resource发送请求的几种方式

更新时间:2020-09-16 21:24:01 作者:startmvc
vueresource发送请求,代码如下所示;<!DOCTYPEhtml><html><head><title>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发送请求的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!