react-08-02 await 和 async

1描述

/*
* async和await
* 1)作用?
*   简化promise对象的使用:不再使用then()来指定成功/失败的回调函数,以同步编码(没有回调函数了)方式实现异步流程
* 2)哪里写await?
*   在返回promise的表达式左侧写await:不想要promise,而是promise异步执行的成功的value数据
* 3)哪里写async?
*   await所在函数(最近的)定义的左侧写async
*
* */

2例子

//实现方法
//第四步:取输入框中对应的值
handleSubmit = (event) =>{
    //阻止事件的默认行为,点击提交按钮不会默认提交
    event.preventDefault();

    //对所有的表单字段进行验证。自动获取values
    this.props.form.validateFields(async (err, values) =>{
        //校验成功
        if(!err){
            console.log('提交ajax请求',values);
            //请求登录
            const {username,password} = values;
            // reqLogin(username,password).then(response =>{
            //     console.log('成功了',response.data);
            // }).catch(error =>{
            //     console.log('失败了',error);
            // })
            try {
                const response =await reqLogin(username,password)
                console.log('请求成功',response.data);
            }catch(error){
                console.log('请求失败',error);
            }

        }else{
            console.log('提交失败');
        }
    })

    //
    // //如何手动得到form对象
    // const form = this.props.form;
    // //获取表单项的输入数据
    // const values = form.getFieldsValue();
    // console.log(values);

}
发布了49 篇原创文章 · 获赞 13 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/mengdeng19950715/article/details/99677442
今日推荐