如何实现应用数据保存成功后才触发附件保存函数？

我已创建两个分别用于保存应用数据与附件的函数，分属不同文件：保存应用数据的handleSubmit函数位于CreateRequirement2.jsx，保存附件的handleSave函数位于RightBar.jsx。需求是仅当应用数据保存操作执行成功后，才触发附件保存函数执行。

原代码展示 #

CreateRequirement2.jsx #

function CreateRequirement2() {

    function handleSubmit(event, status) {
        event.preventDefault();

        const formData = {};
        const inputs = document.getElementsByName('out');
        for (let i = 0; i < inputs.length; i++) {
            // 若存在空输入，返回错误提示
            if (inputs[i].value === '') {
                toast.info('Preencha todos os campos do requerimento');
                return;
            }
            formData[inputs[i].name] = inputs[i].value;
        }

        setData(formData);
        console.log(formData);
        const requestBody = { data: formData, estado: status };
        console.log('+++++++++++++++' + requestBody);
        axios
            .post(`${API_BASE_URL}/requerimentos/9/13`, requestBody)
            .then(response => {
                if (status === 'SAVED') {
                    toast.info('O seu requerimneto foi guardado com sucesso');
                    navigate('/main');
                } else if (status === 'SUBMIT') {
                    toast.success('O seu requerimento foi subemtido com sucesso');
                    navigate('/main');
                }
            })
            .catch(error => {
                console.log(error);
            });
    }

    
    return (
                
                <Box sx={{ background: '#ffffff' }}>
                    <RightBar onSubmit={handleSubmit} />
                </Box>
            </Box>
            
        </>
    );
}

RightBar.jsx #

function RightBar(props) {

    const handleSave = async (event, status) => {
        event.preventDefault();
        if (fileList.length >= 1) {
            for (let i = 0; i < fileList.length; i++) {
                const formData = new FormData();
                formData.append('ANEXO_FILE', fileList[i]);
                try {
                    const response = await axios.post(`${API_BASE_URL}/anexos/50`, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    });
                    console.log(response);
                } catch (error) {
                    console.error(error);
                }
            }
        }
    };


    return (

                <Button
                    onClick={(event) => { props.onSubmit(event, 'SUBMITTED'); handleSave(event); }}
                    className={style.submitBtn}>
                    Submeter
                </Button>
            
        </>
    )
}

解决方案 #

要实现“应用数据保存成功后才执行附件保存”的逻辑，核心是让handleSubmit的异步操作可被等待，并在成功后触发handleSave。

步骤1：修改CreateRequirement2.jsx的handleSubmit函数 #

将handleSubmit改为异步函数，确保它在保存成功时返回Promise，失败时抛出错误，让调用方可以判断执行结果：

function CreateRequirement2() {
    // 改为async函数，支持await调用
    async function handleSubmit(event, status) {
        event.preventDefault();

        const formData = {};
        const inputs = document.getElementsByName('out');
        for (let i = 0; i < inputs.length; i++) {
            if (inputs[i].value === '') {
                toast.info('Preencha todos os campos do requerimento');
                // 抛出错误，中断后续流程
                throw new Error('必填字段未填写');
            }
            formData[inputs[i].name] = inputs[i].value;
        }

        setData(formData);
        const requestBody = { data: formData, estado: status };
        
        try {
            const response = await axios.post(`${API_BASE_URL}/requerimentos/9/13`, requestBody);
            // 根据状态提示成功信息
            if (status === 'SAVED') {
                toast.info('O seu requerimneto foi guardado com sucesso');
            } else if (status === 'SUBMIT') {
                toast.success('O seu requerimento foi subemtido com sucesso');
            }
            // 返回响应，标识保存成功
            return response;
        } catch (error) {
            console.log(error);
            // 抛出错误，让调用方知晓保存失败
            throw error;
        }
    }

    return (
        <Box sx={{ background: '#ffffff' }}>
            <RightBar onSubmit={handleSubmit} />
        </Box>
    );
}

步骤2：修改RightBar.jsx的按钮点击逻辑 #

在按钮的点击事件中，先等待handleSubmit执行成功，再调用handleSave，同时处理可能的失败情况：

function RightBar(props) {
    const handleSave = async (event) => {
        event.preventDefault();
        if (fileList.length >= 1) {
            for (let i = 0; i < fileList.length; i++) {
                const formData = new FormData();
                formData.append('ANEXO_FILE', fileList[i]);
                try {
                    const response = await axios.post(`${API_BASE_URL}/anexos/50`, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    });
                    console.log(response);
                } catch (error) {
                    console.error(error);
                }
            }
        }
    };

    return (
        <Button
            onClick={async (event) => {
                event.preventDefault();
                try {
                    // 先等待应用数据保存成功
                    await props.onSubmit(event, 'SUBMIT');
                    // 保存成功后，执行附件保存
                    await handleSave(event);
                    // 所有操作完成后跳转页面
                    navigate('/main');
                } catch (error) {
                    // 应用数据保存失败时，不执行附件保存
                    console.error('应用数据保存失败，终止附件保存流程');
                }
            }}
            className={style.submitBtn}>
            Submeter
        </Button>
    )
}

关键说明 #

• 异步流程控制：通过async/await确保handleSubmit执行完成且成功后，才调用handleSave。
• 错误处理：在handleSubmit的验证失败或请求失败时抛出错误，让调用方的try/catch捕获，避免执行后续的附件保存。
• 跳转逻辑调整：将原handleSubmit中的navigate移到按钮点击事件的最后，确保所有保存操作完成后再跳转页面。

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