1。在src/下新建api文件夹,api/下新建index.js和public.js
在public.js中:
从“进口axios axios ';
从“qs”进口qs
从“. ./路由器”进口路由器
从“mint-ui”进口{弹出窗口}//注意点,按照以下写
var=axios.create实例();
instance.defaults.timeout=10000;
instance.defaults.headers.post(“内容类型”)=坝τ贸绦?x-www-form-urlencoded”;
出口默认{
fetchGet (url, params={}) {
返回新的承诺((解决,拒绝)=比;{
axios。get (url参数)。然后(res=比;{
如果(res.data。代码===302){
弹出窗口(“提示”、“登录失效,请重新登录”);
对话框。alert('登录失效,请重新登录”、“提示”)。然后(action=比;{
router.push("/登录");
}）;
}
解决(res.data);
})。抓住(错误=比;{
拒绝(错误);
}）
}）
}，
fetchPost (url, params={}) {/*
axios帖子请求后端接收不到参数问题:
解决方案一:有效,但是兼容性不是很好,不是所有浏览器都支持
让数据=https://www.yisu.com/zixun/new URLSearchParams ()
(var关键参数){
数据。追加(关键参数(例子))
}
*///解决方案二:使用qs模块(axios中自带),使用qs.stringify()序列化参数
返回新的承诺((解决,拒绝)=> {
axios。帖子(url, qs.stringify (params))。然后(res=> {
解决(res.data);
})。抓住(错误=> {
拒绝(错误);
}）
}）
}
}
2。在index.js中:
从”。进口http/公共的
出口const getStation=(params)=比;{
返回http。fetchGet(/水电/休息/getBelongUser, params);
}
出口const userLogin=(params)=比;{
返回http。fetchPost(“/水电/休息/登录”,params);
}
3。在Login.vue中调用后请求方法:
& lt; template>
& lt; div类="登录"比;
& lt; h2>登录页面& lt;/h2>
& lt;输入类型=拔谋尽闭嘉环?扒胧淙胗没皏模型=坝没北?
& lt;输入类型=懊苈搿闭嘉环?扒胧淙朊苈搿皏模型=懊苈搿北?
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/登录”@click=皌oLogin”比;
& lt;/div>
& lt;/template>
& lt; script>
进口{userLogin}“. ./. ./api/指数”
出口默认{
名称:“应用程序”,
数据(){
返回{
用户名:“”,
密码:"
}
}，
方法:{
toLogin () {
让params={
用户名:this.Username,
密码:this.Password
};
userLogin (params)。然后(res=比;{
如果(res)。代码===200){
这个。router.push美元(“/home”)
}
}）
}
}
}
& lt;/script>
# # # # 4。在Home.vue调用得到请求方法
& lt; template>
& lt; h2类=凹摇北?
{{stationName}}
& lt;/h2>
& lt;/template>
& lt; script>
进口{getStation}“. ./. ./api/指数”
出口默认{
数据(){
返回{
stationName:“”
}
}，
创建(){
getStation ()。然后(res=比;{
这一点。stationName=res.msg;
}）
}
}
& lt;/script>
以上所述是小编给大家介绍的Vue简单封装axios之解决后请求后端接收不到参数问题,希望对大家有所帮助!
