Express.js - 如何在将数据插入数据库后重新加载页面

Express.js - how to reload page after inserting data to the database

我是 node/express 的新手,我一直被我的问题困扰 - 我有一个带有文件输入 (xlsx) 的表单 - 在读取文件并将其序列化后,我通过 axios 将其发送到后端。

这是我用来读取 excel 文件并将其发送到给定端点的部分:

const inputXLSX = document.querySelector('#inputXLSX');
const submitXLSX = document.querySelector('#submitXLSX');

let selectedFile;

const readXLSXtoJSON = (file) => {

return new Promise((resolve, reject) => {

if(!file) reject(Error('Wystąpił błąd podczas pobierania pliku'));

    let fileReader = new FileReader();
        fileReader.readAsBinaryString(file);
        fileReader.onload = (event) => {
            const data = event.target.result;
            const workbook = XLSX.read(data, {type: 'binary'});
            let rowObj;
            workbook.SheetNames.forEach(sheet => {
                rowObj = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);  
            });
            resolve(JSON.stringify(rowObj));
        }
})
}

if (inputXLSX) {
    inputXLSX.addEventListener('change', (event)=>{
        event.preventDefault();
        selectedFile = event.target.files[0];
        })  
}

if (submitXLSX) {
    submitXLSX.addEventListener('click', async (event)=>{
        event.preventDefault();
        try {
            const XLSXdata = await readXLSXtoJSON(selectedFile);
            if (XLSXdata) {
                axios.post('http://localhost:3000/api/1.0/tokens', {
                    XLSXdata
                  })
            }
        } catch (err) {
            console.log(Error);
            }
       })
}

中间件函数-仅用于向数据库插入数据或return状态'fail'

exports.importToken = async (req, res, next) => {
  try {
    Token.insertMany(JSON.parse(req.body.XLSXdata));
  } catch (err) {
    return res.status(400).json({
      status: 'fail',
      message: 'Wystąpił bład podczas zapisywania tokenów do bazy',
    });
  }
  next();
};

中间件堆栈中的最终函数:

exports.showToken = async (req, res) => {
  const newTokensList = JSON.parse(req.body.XLSXdata);
  res
    .json({
      status: 'success',
      data: newTokensList,
    })
    .redirect(301, '/admin/tokens');
};

在return中我得到 UnhandledPromiseRejectionWarning: E​​rror [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are send to the client

一种选择是redirect响应:

res
  .json({
    status: 'success',
    data: newTokensList,
  })
  .redirect(301, '/page_you_want'); // Here!

这个问题的解决方案不是创建任何中间件,而是简单地:

  • 等待 axios post 请求

  • 添加 preventDefault() 以防止提交表单。

  • 添加window.location.reload()

        submitXLSX.addEventListener('click', async (event) => {
            event.preventDefault();
            try {
                const XLSXdata = await readXLSXtoJSON(selectedFile);
                await axios.post('http://localhost:3000/api/1.0/tokens', { XLSXdata });
                window.location.reload(true);
    
            } catch (err) {
                console.log(Error);
            }
        })
    }