React异步提交数据成功却进入catch块问题求助

点击提交按钮后，后端成功将数据写入Postgres数据库，但前端axios请求进入catch代码块，无法正确展示成功状态。后端终端报错connection closed before res end/flush，浏览器控制台也存在对应错误。推测是数据库还未向后端返回响应，前端就已获取到空响应，从而判定为错误进入catch块。

前端代码 #

const handleSubmitData = async (event) => {
    event.preventDefault();
    event.target.disabled = true;
    try {
      const body = {
        well_id: well_id,
        date_install_pump: dateform2,
        pump_type: pump_type,
        pump_size: pump_size,
        stroke_length: stroke_length,
        barrel_length: barrel_length,
        gas_anchor: gas_anchor,
        pump_set: pump_set,
        manufacturer: manufacturer,
        installation_remarks: installation_remarks,
        date_install_pu: dateSRP1,
        pumping_unit_type: pumping_unit_type,
        pumping_unit_model: pumping_unit_model,
        motor_hp: motor_hp,
        manufacturer_surf: manufacturer,
        installation_remarks_surf: installation_remarks,
        row_changed_by: users,
        row_created_by: users,
        username: users,
        role: role,
      }
      const response = await axios.post(global.config.i18n.url + 'dw_pump', body);
      if (response && response.data && response.data.message) {
        setIsSuccess(true);
        setModals(response.data.message);
        setOpenModal(true);
      } else {
        setIsSuccess(false);
        setModals('请查看所有表格页面确认数据是否提交');
        setOpenModal(true);
      }
    } catch (e) {
      setIsSuccess(false)
      setModals(e.response ? e.response.data.message : '请求异常，请检查数据是否已提交');
      setOpenModal(true);
    } finally {
      event.target.disabled = false;
    }
  }

后端代码 #

async postPumpSRPDownAndSurfTrx(req, res) {
    let trx;
    try {
        trx = await db_dwvm.transaction();
        const momentDate = new Date();
        const pumpHeader = {
            well_id: req.body.well_id,
            date_install_pump: moments(req.body.date_install_pump),
            pump_type: req.body.pump_type,
            contractor: null,
            installation_remarks: null,
            row_changed_by: req.body.row_changed_by,
            row_created_by: req.body.row_created_by,
            created_at: moments(momentDate),
            updated_at: moments(momentDate),
        }
        const pumpSRPDownhole = {
            well_id: req.body.well_id,
            date_install_pump: moments(req.body.date_install_pump),
            pump_type: req.body.pump_type,
            pump_size: req.body.pump_size,
            stroke_length: req.body.stroke_length,
            barrel_length: req.body.barrel_length,
            gas_anchor: req.body.gas_anchor,
            pump_set: req.body.pump_set,
            manufacturer: req.body.manufacturer,
            installation_remarks: req.body.installation_remarks
        }
        const pumpSRPSurface = {
            well_id: req.body.well_id,
            date_install_pump: moments(req.body.date_install_pump),
            date_install_pu: moments(req.body.date_install_pu),
            pumping_unit_type: req.body.pumping_unit_type,
            pumping_unit_model: req.body.pumping_unit_model,
            motor_hp: req.body.motor_hp,
            manufacturer: req.body.manufacturer_surf,
            installation_remarks: req.body.installation_remarks_surf,
            row_changed_by: req.body.row_changed_by,
            row_created_by: req.body.row_created_by,
            created_at: moments(momentDate),
            updated_at: moments(momentDate)
        };
        console.log(pumpHeader)
        console.log(pumpSRPDownhole)
        console.log(pumpSRPSurface);
        const date = new Date();
        const newdate = `${date.toLocaleString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}` + " Pukul " + ("0" + ` ${date.toLocaleString('id-ID', { hour: 'numeric' })}`).slice(-2) + ':' + ("0" + `${date.toLocaleString('id-ID', { minute: 'numeric' })}`).slice(-2);
        const { username, role, pesan = `Pump Header, Pump SRP Downhole dan Pump SRP Surface Telah Terinput Pada ${newdate}` } = req.body;
        await models.pump_header.create(pumpHeader, { transaction: trx });
        await models.pump_srp_downhole.create(pumpSRPDownhole, { transaction: trx });
        await models.pump_srp_surface.create(pumpSRPSurface, { transaction: trx });
        await notificationvmModel.postNotification(username, role, pesan);
        await trx.commit();
        res.status(201).json({
            message: '提交成功',
            error: false
        }).end();
    } catch (error) {
        if (trx) {
            await trx.rollback();
            res.status(500).send({
                message: error.message,
                error: true,
            });
        } else {
            res.status(500).send({
                message: error.message,
                error: true,
            });
        }
    }
}

问题修复方案 #

核心问题 #

connection closed before res end/flush说明服务器还未完成响应发送，连接就被提前关闭。结合代码来看，主要是响应逻辑不完整、异步操作未正确等待导致的。

具体修复点 #

1. 完善后端错误响应逻辑
   原catch块中，当事务初始化失败（trx不存在）时没有发送响应，会导致请求挂起超时，补充else分支确保所有异常场景都有响应返回。

2. 确保响应完全发送
   在res.json后添加end()方法，显式结束响应，避免因框架内部机制导致响应未完全发送就断开连接。

3. 前端catch块增加容错处理
   当连接断开无响应时，e.response会不存在，直接访问e.response.data会报错，增加判断逻辑避免前端崩溃。

4. 验证异步操作完整性
   确认notificationvmModel.postNotification是异步函数且正确使用await等待其执行完成，避免后续响应在通知操作未结束时发送。

5. 检查数据库连接池配置
   调整Postgres连接池的idleTimeoutMillis和connectionTimeoutMillis参数，避免事务执行时间过长导致连接被提前回收。

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