React js async await 函数返回错误

React js async await function returns error

提问人:MrMG 提问时间:11/15/2023 更新时间:11/15/2023 访问量:37

问:

我有一个将数据发送到后端 Node JS 服务器的功能,该服务器获取数据并将其提交到 Postgres 数据库。功能如下handlesSubmitasync

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('Please check the show all tables page to see your data');
        setOpenModal(true);
      }
    } catch (e) {
      setIsSuccess(false)
      setModals(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: 'Success',
            error: false
        });
    } catch (error) {
        if (trx) {
            await trx.rollback();
            res.status(500).send({
                message: error.message,
                error: true,
            });
        }
    }
}

我的问题是,当我按下按钮并将数据发送到服务器时,服务器确实会收到数据。但是,即使数据成功提交到数据库,也会以某种方式进入该部分,因此无法正确显示。我认为发生的事情是数据库没有发送到,但已经“获取”了它,它什么也没发现,所以它认为这是一个错误并移动到该部分。我认为是这样,因为在后端终端中,在它从前端接收数据后,它会显示此错误代码submitbackendresponsecatchresponsebackendfrontendresponsecatchconnection closed before res end/flush

这是来自浏览器控制台的错误,在此处输入图像描述

ReactJS 节点 .js PostgreSQL

评论


答:

0赞 Saidamir 11/15/2023 #1

你能试试下面吗:

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.status === 200) {
        setIsSuccess(true);
        setModals(response.data.message);
        setOpenModal(true);
      } else {
        setIsSuccess(false);
        setModals('Please check the show all tables page to see your data');
        setOpenModal(true);
      }
    } catch (e) {
      setIsSuccess(false)
      setModals(e.response)
      setOpenModal(true)
    } finally {
      event.target.disabled = false;
    }
  }

评论

0赞 MrMG 11/23/2023
已经试过了,它仍然是一样的。因为后端有时会给出 500 代码表示验证错误,或者 0 表示根本没有