React提取帖子需要太长

Question

我将Web服务从Angular转换为反应。与我合作的Angular版本为6.0.x，Nodejs版本为10.18.x。我目前正在使用的React版本为16.14.0，Nodejs升级到12.16.2。

在Angular中，我使用了HTTPClient模块（所有CURD），并且简单而快速。我只需要编写查询并发送请求。

我认为这也同样简单，但显然不是。我正在为所有CRUD使用Fetch，因为它不需要第三方库。我想将第三方库的数量保持尽可能低，因为我必须在云中运行该服务（1 CPU和1GB RAM，具有50GB磁盘尺寸，这并不多）。

到目前为止，我所拥有的如下：

// page.jsx
class Page extends React.Component {
    toNext() {
        const postData = async() => {
            const postResponse = await fetch('/post-data', { 
                method: 'POST', 
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, 
                body: JSON.stringify(this.state.data)
            });
            return await postResponse;
        }
        // after uploading successfully, move to anotherpage and load data including the one just loaded.
        postData().then(res => res.json()).then((data) => { if (!data.result) this.props.history.push('/anotherpage'); });
    }

    render() {
        return(
            <TouchableOpacity onPress={this.toNext}>
        )
    }
}

// index.js where fetch post is defined with url, query, etc
const express = require('express');
const mysql = require('mysql');

const host = 'host';
const user = 'user';
const password = 'password';

const conn = mysql.createPool({
    host: host,
    user: user,
    password: password,
    database: 'database'
});

app.post('/post-data', function (req, res) {
    let body = req.body;
    let isError = false;
    const checkError = () => {
        isError = true;
    }

    for (let row of body) {
        console.log('one loop started: ', new Date()) // check if the request itself takes too long
        conn.getConnection(function (err, connection) {
            connection.query(`INSERT INTO TABLE (COL1, COL2, COL3, ...) VALUES ("${row.COL1}", "${row.COL2}", "${row.COL3}", ...)`,
            function (error, results, fields) {
                if (error) {
                    console.log(row)
                    checkError();
                    throw error;
                };
            });
        });
        console.log('one loop ended: ', new Date()) // check if the request itself takes too long
    } 

    res.send({
        'result': isError
    });
})

我添加的日志显示，请求本身仅需每行1 ms，但是大约需要4分钟才能上传所有数据（44行，17列，每个单元格，大约10个字符） 。在Angular中，仅需几秒钟（最多只有2秒）。

我试图找到实际的邮政编码的外观（app.post in index.js中），但我得到的只是功能代码（JSX或TSX代码）。我应该如何将数据发布到DB？是否需要这么长时间才能通过获取发布数据？

更新： 正如菲尔在评论中所建议的那样 为什么我们不能在Express中执行多个响应。 。因此，我更改了代码，尽管起初看起来它已经解决了原始问题，但是将数据发布到DB（大约4分钟）时仍然存在。

Answer 1

如果有人遇到类似问题，这就是我发现的。

当我使用 Node 10.18.X，MySQL软件包2.17.1 和Angular时，我在for-loop中行插入了行，并且它没有任何问题。

但是现在我正在使用节点12.16.2，MySQL软件包2.18.1 和React，并且似乎优于逐行插入。尽管逐行插入有效，但它会延迟，并且在一段时间内插入数据（如几分钟）。我仍然必须找出原因，但是与此同时，我使用了散装插入。

我在 bulk-insertion上遵循了此链接。

我的更新的代码看起来像：

// index.js
app.post('/post-data', (req, res) => {
    let body = req.body;

    // define sql query
    let sql = `INSERT INTO TABLE (COL1, COL2, COL3, ...) VALUES ?`;

    // below two lines can be done in jsx(tsx)
    let values = new Array(body.length).fill(null).map(() => { return [] });
    for (let i = 0; i < body.length; i++) {
        for (let col of ['COL1', 'COL2', 'COL3', ...]) {
            values[i].push(body[i][col]);
        }
    }

    // it should be [values]. So, basically [[[values1, values2, values3, ...], [values1, values2, values3, ...]]]
    // bulk-insertion
    modConn.query(sql, [values], (error, results, fields) => {
        if (!error) {
            res.send(results)
        } else {
            res.send(error)
        }
    });
});

res.send（）在内部，因此我认为没有问题，因为只有其中一个是在任何时候执行的。而且，发布没有延迟，因此我所有的数据（44行乘17列）都在一秒钟以下插入。