163585580 发表于 2022-4-18 11:36

vue实现注册方法不明白

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

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: "注册成功"
                };

                constvalidRes=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 发表于 2022-4-18 11:41

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

菌落痒 发表于 2022-4-18 11:44

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

163585580 发表于 2022-4-18 11:47

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

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

菌落痒 发表于 2022-4-18 11:50

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

菌落痒 发表于 2022-4-18 11:55

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

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

zhzhch335 发表于 2022-4-18 12:54

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

快乐小风 发表于 2022-4-18 13:25

1. async 和 await 一起使用, 简单就是把js的异步变为同步
2. 注册方法里就是检验基础参数,用到了解构赋值
3. 建议还是学习基础语法吧, 这些都是最基础的了
页: [1]
查看完整版本: vue实现注册方法不明白