guyuewuren
guyuewuren
  • 发布:2018-09-03 00:25
  • 更新:2019-12-13 11:36
  • 阅读:8341

【报Bug】uni.request接口的success回调函数内无法调用其他函数

分类:uni-app

详细问题描述
[内容]uni.request接口的success回调函数内无法调用已定义的其他函数,返回信息正常,this.login(userName);报错

重现步骤
[步骤]
[结果]
[期望]

运行环境
[系统版本]
[浏览器版本]
[IDE版本]0.1.47.20180823-alpha
[mui版本]

附件
[代码片段]<template>
<view class="content">
<view class="input-group">
<view class="input-row border">
<text class="title">账号:</text>
<input type="text" v-model="username" placeholder="请输入账号">
</view>
<view class="input-row">
<text class="title">密码:</text>
<input type="text" password="true" v-model="password" placeholder="请输入密码">
</view>
</view>
<view class="btn-row">
<button type="primary" class="primary" @tap="bindLogin">登录</button>
</view>
<view class="action-row">
<navigator url="../reg/reg">注册账号</navigator>
<text>|</text>
<navigator url="../pwd/pwd">忘记密码</navigator>
</view>
</view>
</template>

<script>

import {  
    mapState,  
    mapMutations  
} from 'vuex'  

export default {  
    data() {  
        return {  
            providerList: [],  
            hasProvider: false,  
            username: '',  
            password: '',  
            positionTop: 0  
        }  
    },  
    computed: mapState(['forcedLogin']),  
    methods: {  
        ...mapMutations(['login']),  
        bindLogin() {  
            if (this.username.length < 5) {  
                uni.showToast({  
                    icon: 'none',  
                    title: '账号最短为 5 个字符'  
                });  
                return;  
            }  
            if (this.password.length < 6) {  
                uni.showToast({  
                    icon: 'none',  
                    title: '密码最短为 6 个字符'  
                });  
                return;  
            }  
            /**  
             * 下面简单模拟下服务端的处理  
             * 检测用户账号密码是否在已注册的用户列表中  
             * 实际开发中,使用 uni.request 将账号信息发送至服务端,客户端在回调函数中获取结果信息。  
             */  
            const data = {  
                username: this.username,  
                password: this.password,  
                device_type: 'web'  
            };  
            const userName = this.username ;  

// const validUser = service.getUsers().some(function (user) {
// return data.username === user.username && data.password === user.password;
// });
uni.request({
url: 'http://www.cymusic.top/api/user/public/login',
data: data,
success: function (res) {
console.log(JSON.stringify(res.data));
console.log(res.statusCode);
this.login(userName);
if (this.forcedLogin) {
uni.reLaunch({
url: '../main/main',
});
} else {
uni.navigateBack();
}

                },  
                fail: () => {  
                    uni.showToast({  
                        icon: 'none',  
                        title: '用户账号或密码不正确',  
                    });  
                }  
            });  
        },  

// toMain(userName) {
// this.login(userName);
// /*
//
强制登录时使用reLaunch方式跳转过来
// 返回首页也使用reLaunch方式
//
/
// if (this.forcedLogin) {
// uni.reLaunch({
// url: '../main/main',
// });
// } else {
// uni.navigateBack();
// }
//
// }
},
}
</script>

<style>
.action-row {
display: flex;
flex-direction: row;
justify-content: center;
}

.action-row navigator {  
    color: #007aff;  
    padding: 0 20px;  
}  

</style>

[安装包]

联系方式
[QQ]
[电话]

2018-09-03 00:25 负责人:无 分享
已邀请:
i***@outlook.com

i***@outlook.com - 台灣

sucess 后面,你没有 bind(this)
所以,你的,succsess里面的this指的不是外面的this

  • guyuewuren (作者)

    还是不太明白,那应该如何写,下面的if (this.forcedLogin)判断正常啊,login()和forcedLogin都是在store中定义的

    2018-09-03 02:27

i***@outlook.com

i***@outlook.com - 台灣

  • guyuewuren (作者)

    成功了,非常感谢!

    2018-09-03 10:04

walker_cloud

walker_cloud

success中拿不到vue中的this,可以用bind()绑定,或者用that存储this

  • 1***@qq.com

    我尝试了用局部变量that存储this的引用, 这样that和this就指向了同一块内存区域, 然后再通过that对所指向的内存区域赋值. 这样就解决了this作用域的问题, 非常感谢!

    2019-09-01 23:07

w***@hotmail.com

w***@hotmail.com

不错的方法,解决了,感谢!!

该问题目前已经被锁定, 无法添加新回复