Vue简单封装axios之解决post请求后端接收不到参数问题
1.在src/下新建api文件夹,api/下新建index.js和public.js
在public.js中:
importaxiosfrom'axios'; importqsfrom'qs' importrouterfrom'../router' import{MessageBox}from'mint-ui' //注意点,按照以下写 varinstance=axios.create(); instance.defaults.timeout=10000; instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'; exportdefault{ fetchGet(url,params={}){ returnnewPromise((resolve,reject)=>{ axios.get(url,params).then(res=>{ if(res.data.code===302){ MessageBox('提示','登录失效,请重新登录'); MessageBox.alert('登录失效,请重新登录','提示').then(action=>{ router.push("/login"); }); } resolve(res.data); }).catch(error=>{ reject(error); }) }) }, fetchPost(url,params={}){ /* axiospost请求后端接收不到参数问题: 解决方案一:有效,但是兼容性不是很好,不是所有浏览器都支持 letdata=newURLSearchParams() for(varkeyinparams){ data.append(key,params[key]) } */ //解决方案二:使用qs模块(axios中自带),使用qs.stringify()序列化params returnnewPromise((resolve,reject)=>{ axios.post(url,qs.stringify(params)).then(res=>{ resolve(res.data); }).catch(error=>{ reject(error); }) }) } }
2.在index.js中:
importhttpfrom'./public' exportconstgetStation=(params)=>{ returnhttp.fetchGet('/hydro/rest/getBelongUser',params); } exportconstuserLogin=(params)=>{ returnhttp.fetchPost("/hydro/rest/login",params); }
3.在Login.vue中调用post请求方法:
登录页面
####4.在Home.vue调用get请求方法
{{stationName}}
总结
以上所述是小编给大家介绍的Vue简单封装axios之解决post请求后端接收不到参数问题,希望对大家有所帮助!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。