vue实现注册方法不明白

163585580

在注册模块中，async registerHandler()这个promise方法看不太懂，不是很明白，请大佬指点
还有就是一般我们vue的data（）中直接return：名字：‘ ’。这个是什么意思

[JavaScript] 纯文本查看 复制代码

Vue.http.options.root = '${pageContext.request.contextPath}';    Vue.http.options.emulateJSON = true;
    Vue.http.options.xhr = {withCredentials: true};
    Vue.use(window.VueQuillEditor);
    let vm = new Vue({
        el: "#app",
        data() {
            return {

                actiontype: 'save',
                errors: {},
                hostHead: '${pageContext.request.contextPath}',
                "huiyuan": {
                    "accountname": "",
                    "password": "",
                    "email": "",
                    "idcardno": "",
                    "nickname": "",
                    "name": "",
                    "sex": "",
                    "touxiang": "/upload/nopic.jpg",
                    "des": ""
                },
            }
        },
        methods: {

            async registerHandler() {

                let defaultOptions = {
                    url: "admin/huiyuan/save",
                    actionTip: "注册成功"
                };

                const  validRes=this.myValidator.valid(this,{isShowErrors:true});
                console.log("valRes",validRes);
                if (!validRes)
                    return ;
                let util = new VueUtil(this);
                let params = {...this.huiyuan};
                let {data: res} = await util.http.post(defaultOptions.url, params);
                if (res.stateCode <= 0) {
                    util.alert(res.des, '系统提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                util.message({
                    message: defaultOptions.actionTip,
                    type: 'success',
                    duration: 2000
                });
                window.location.href = this.hostHead + "/e/regresult.jsp";
            }
        },
        created() {
           console.log("注册创建");
        }

    });

gao834010024

data是一个方法，vue在渲染页面的时候，回先调用这个方法，return就是这个方法返回的数据，就是{}里面的，算是一个对象

菌落痒

async 函数中  await后边的promise出现结果以后 才会接着执行接下来的代码 防止了执行下边代码会用到promise的结果的时候 promise的结果还没出来，可以理解成 await下边的代码都是在await后边的promise的then()方法中执行的。至于为什么data要用函数返回，是因为如果组件重复调用的时候  如果直接使用一个对象的话  多次调用的data会指向同一个对象  会造成修改一个 另一个组件数据也会修改的问题 ，函数返回的话 相当于每次调用都会重新新建一个新的对象，避免了复用组件间的数组污染

163585580

菌落痒 发表于 2022-4-18 11:44
async 函数中  await后边的promise出现结果以后 才会接着执行接下来的代码 防止了执行下边代码会用到promis ...

谢谢大佬，能帮我看一下这个registerHandler函数体里的方法啥意思吗

菌落痒

相当于第40行这个promise结束  应该是获取到数据以后  才会接着执行41行和下边的代码，这是es6中解决回调地狱的一个方法

菌落痒

163585580 发表于 2022-4-18 11:47
谢谢大佬，能帮我看一下这个registerHandler函数体里的方法啥意思吗

37行前边应该是校验输入内容 如果输入的没问题就会往下边走注册接口。接口请求结果出来以后，弹出结果，失败的话走42行的提示，并结束。成功的话走的是47行提示，并且跳转到52行

zhzhch335

有一说一 这个跟vue完全莫得关系嘛
JS基础稍微去补充一下下 对之后的开发工作会大有裨益的

快乐小风

1. async 和 await 一起使用, 简单就是把js的异步变为同步
2. 注册方法里就是检验基础参数,用到了解构赋值
3. 建议还是学习基础语法吧, 这些都是最基础的了