javascript - 具有奇怪行为的发布请求

标签 javascript mysql node.js reactjs amazon-web-services

我设置了一个 Node/express服务器,它与mysql数据库通信(两者都托管在AWS上,分别在elastic beanstalk环境和RDS实例中)。我在 React 中创建了一个简单的创建帐户身份验证项目,目前正在本地运行。我通过发布请求与服务器进行通信。

createAccount = (event) => {
  console.log("hello from createAccount");
  const isValid = this.validate();
  if (!isValid) {
    console.log("not valid");
    return false;
  } else {
    const formData = new FormData();
    formData.append("firstName", this.state.firstName);
    formData.append("lastName", this.state.lastName);
    formData.append("username", this.state.username);
    formData.append("passcode", this.state.passcode);
    console.log(formData);

    fetch("https://www.myurl.com/createUser", {
      method: "POST",
      headers: new Headers({
        "Access-Control-Allow-Origin": "*",
      }),
      body: formData,
    });
  }
};

这是服务器端代码:

var mysqlConnection = mysql.createConnection({
  host: "my-endpoint",
  user: "****",
  password: "****",
  port: "****",
  database: "****",
});

app.post("/createUser", function (request, response) {
  console.log("/createUser");
  console.log(request.body);
  const createUser = `CALL CreateUser('${request.body.firstName}', '${request.body.lastName}', '${request.body.username}', '${request.body.passcode}')`;
  mysqlConnection.query(createUser, (error, result) => {
    if (error) {
      console.log(error);
    } else {
      console.log("SUCCESSFULLY CREATED A USER ACCOUNT");
      response.set("Access-Control-Allow-Origin", "*");
      mysqlConnection.end();
    }
  });
});

但是,我的帖子请求做了一些奇怪的事情...大约 2/3 的时间,一切都按预期进行。用户创建一个帐户,信息已成功添加到我的数据库中。然而,其余时间一切似乎都运行良好(通过检查我的 console.log 检查点),但信息未添加到我的数据库中......用户未成功创建帐户。发生这种情况时,我打开 AWS 的日志来检查服务器正在做什么,但没有打印出我所期望的内容。我的新帐户信息没有打印(而通常是),也没有打印错误。这是一个令人头疼的问题。是否有某种原因导致我的发布请求无法到达我的服务器,但只是部分时间?我很茫然……

我完全在本地环境中运行该应用程序(将我的请求更改为本地服务器,而不是托管在 elastic beanstalk 上的请求)。这在 100% 的情况下有效(请注意,这是完全相同的服务器代码)。我对这种行为感到困惑,这显然与 AWS 中的 elastic beanstalk 上的托管版本有关。是什么导致了这种行为?如何修复它?

我切换回托管服务器进行进一步测试。我只是创建垃圾邮件帐户,看看是否能注意到任何模式。该应用程序大约每 5 次就有 1 次创建一个成功的帐户。另外四次它不会将任何信息保存到数据库中。这不是我的字段数据的问题(我已经实现了一些错误检查),因为我只是一遍又一遍地发送相同的信息,直到它最终创建。最终确实如此,但只有在大约 4 次尝试之后。

下面是我添加了 connection.end() 的发布请求,以及我最初按照评论中的要求连接到数据库的位置。

var mysqlConnection = mysql.createConnection({
  host: "my-endpoint",
  user: "****",
  password: "****",
  port: "****",
  database: "****",
});

app.post("/createUser", function (request, response) {
  console.log("/createUser");
  console.log(request.body);
  const createUser = `CALL CreateUser('${request.body.firstName}', '${request.body.lastName}', '${request.body.username}', '${request.body.passcode}')`;
  mysqlConnection.query(createUser, (error, result) => {
    if (error) {
      console.log(error);
    } else {
      console.log("SUCCESSFULLY CREATED A USER ACCOUNT");
      response.set("Access-Control-Allow-Origin", "*");
      mysqlConnection.end();
    }
  });
});

最佳答案

fetch 函数返回一个 promise 。因此,您需要添加一个 .then block 。如果不使用 .then 下面的代码将不会等待提取完成。请检查并告诉我。

什么是 promise ? Promise 最终会被解析并返回一个值,这与立即返回值的同步函数不同。

fetch('https://www.myurl.com/createUser', {
    method: 'POST',
    headers: new Headers({
        'Access-Control-Allow-Origin': '*'
    }),
    body: formData
}).then(() => {
    Console.log(‘done’)

})

我看到的第二个问题是,您的服务器端 Express 端点 /createUser 应该仅在 mysql 查询完成后完成。因此你应该在查询完成后调用 res.end 来结束请求。这样前端在查询完成后就能得到api的响应。

mysqlConnection.query(createUser, (error, result) => {
    if (error) {
        console.log(error);
        res.status(400).send(new Error('error result'));

    } else {
        console.log('created user');
        res.send('success result')
    }
})

关于javascript - 具有奇怪行为的发布请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66341205/

相关文章:

JavaScript 竞争条件

javascript - Google Places API 无效值错误 : not an instance of HTMLInputElement

mysql - 在docker中运行MySQL时出现 "Access Denied"错误

node.js - React Router v6 中的 protected 路由,使用 useState,但始终返回 false

node.js - Nodejs grunt混淆

Javascript 整个单词 w

javascript - 动态更改包含跨度类的按钮文本

php - 为什么这个简单的连接不起作用? (mysql)

php - 删除 MySQL 字段值中字符串值开头或结尾的空格

node.js - 引用错误: Promise is not defined OnsenUI