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
}
    

结束~

相关推荐
sunbyte25 分钟前
每日前端宝藏库 | tinykeys ✨
前端·javascript
Demoncode_y29 分钟前
Vue3 + Three.js 实现 3D 汽车个性化定制及展示
前端·javascript·vue.js·3d·汽车·three.js
Dontla1 小时前
Turbopack介绍(由Vercel开发的基于Rust的高性能前端构建工具,用于挑战传统构建工具Webpack、vite地位)Next.js推荐构建工具
前端·rust·turbopack
两个西柚呀1 小时前
nodejs中http模块搭建web服务器
服务器·前端·http
Focusbe1 小时前
百变AI助手:离线优先数据同步方案设计
前端·后端·面试
ObjectX前端实验室2 小时前
React Fiber 双缓冲树机制深度解析
前端·react.js
高斯林.神犇3 小时前
javaWeb基础
前端·chrome
用户21411832636023 小时前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
南屿im3 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript
charlie1145141913 小时前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析