vue resource发送请求，代码如下所示；
<!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta charset="utf-8"> </head> <body> <div> <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发送请求的几种方式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: