async没有了await会发生什么?实际问题

关于这个问题

js 复制代码
// 父组件
const getFormData = async () => { 
    importForm.validateFields().then((values) => { 
    const params = { 
        MaNO: values?.MaNO, 
        InvoiceNO: values.InvoiceNO, 
        Destination: values?.Destination 
    } 
    console.log('params111'); 
    return params 
    }
    )
}

<ImportFileComponent 
    getFormData={getFormData} 
     <Button>按钮<Button>
</ImportFileComponent>
js 复制代码
// 子组件
const onConfirm = async () => { 
    const dataValue = getFormData?.() 
    console.log(dataValue, 'dataValue'); 
}

1.抛出问题:当父组件传这个方法给子组件调用的时候,拿不到返回的params,而是一个promise

2.问题原因:父组件的async走完之后并没有等到await,返回的值在.then()里面的,所以导致他实际返回的是一个Promise

3.解决问题:既然找到了问题所在,那么直接使用await拿到值,使用同步的方式处理异步的代码,或者可以使用两个then,但是那样有些麻烦。

所以,正确的写法是这样的,父组件的方法处理下写

js 复制代码
 // 父组件
 const getFormData = async () => { 
    const values = await importForm.validateFields() 
    const params = {
        MaNO: values?.MaNO, 
        InvoiceNO: values.InvoiceNO, 
        Destination: values?.Destination 
    } 
    console.log('params111'); 
    return params
}
    

结束~

相关推荐
web打印社区16 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗16 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长16 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅17 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_17 小时前
Chrome开发者工具
前端·chrome
YiHanXii18 小时前
this 输出题
前端·javascript·1024程序员节
楊无好18 小时前
React中ref
前端·react.js
程琬清君18 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪10018 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔6618 小时前
flutter实现web端实现效果
前端·flutter