React中同步异步函数混合时如何确保异步执行完再运行后续函数

问题核心：getValue为异步函数，JavaScript默认不会等待异步函数执行完成就会执行后续同步代码，因此需要通过异步流程控制实现顺序执行。

方案1：async/await 写法（推荐，可读性更高） #

异步函数默认返回Promise实例，通过await关键字可以暂停当前函数执行，等待Promise状态变为已完成后再继续执行后续代码：

submit = async () => {
    this.props.toggle();
    // 等待getValue完全执行完成后再执行后续逻辑
    await this.props.getValue(); 
    this.notify();
    this.props.resetValidation();
    this.props.disable();
    this.props.actionCost();
};

注意事项 #

• 需确认getValue内部正确返回了异步操作对应的Promise对象，比如内部使用fetch/axios请求时，要把请求实例return出来，否则await无法正确等待执行结果。
• 建议添加异常捕获逻辑，避免getValue执行报错导致后续逻辑完全中断：

submit = async () => {
    try {
        this.props.toggle();
        await this.props.getValue(); 
        this.notify();
        this.props.resetValidation();
        this.props.disable();
        this.props.actionCost();
    } catch (error) {
        // 自定义错误处理逻辑，比如弹出错误提示
        console.error('数据获取失败：', error);
    }
};

方案2：Promise.then 链式调用 #

如果不偏好async/await语法，也可以直接用Promise的then方法指定异步完成后的回调：

submit = () => {
    this.props.toggle();
    this.props.getValue()
        .then(() => {
            this.notify();
            this.props.resetValidation();
            this.props.disable();
            this.props.actionCost();
        })
        .catch(error => {
            console.error('数据获取失败：', error);
        })
};

内容的提问来源于stack exchange，提问作者sambit