微客导航 » 文章资讯 » Vue简单封装axios之解决post请求后端接收不到参数问题

Vue简单封装axios之解决post请求后端接收不到参数问题

2023-08-01 11:42:04 313

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请求方法

总结

以上所述是小编给大家介绍的Vue简单封装axios之解决post请求后端接收不到参数问题，希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue简单封装axios之解决post请求后端接收不到参数问题

登录页面

随机推荐

Vue简单封装axios之解决post请求后端接收不到参数问题

登录页面

热门推荐

随机推荐