今天小编给大家分享一下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发送请求”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
