Question

我的前端在React Native中完成，后端在nodejs中完成。这是一个要求用户进行注册（电子邮件，密码，名称，电子邮件等）的应用程序，然后使用猫鼬将数据发送到数据库（mongodb）。

在我的前端；当用户按下SignUp按钮时，它将调用一个函数名称“ Submit”，您可以在下面找到它：

    const Submit = async (fname, email, pwd, confpwd) => {
  if (String(pwd).localeCompare(String(confpwd)) == 0) {
      let result = await fetch('http://127.0.0.1:2000/api/user/register', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(
        {
          name: fname.fname,
          email: email.email,
          password: pwd.pwd
        }
      )
    })
    console.log("RESULT : " + JSON.stringify(result))
  } else{
    console.log('NOT SAME PASSWORD')
  }
  
  
};

它只接受用户输入的名字，电子邮件和密码，并使用访存将其发布到API。一切正常，最后一行除外：console.log（“结果为” + JSON.stringify（result））。它总是返回一个空的json。

我后端的注册路由如下：

//REGISTER
router.post('/register', async (req, res) => {

    //Check the input of the user before we make a user
    
    const {error} = registerValidation(req.body)
    if (error) {
        console.log('Error1')
        return 'Error1'
    }
    console.log('1&')
    //Check if the user is already in the database
    const emailExist = await User.findOne({email : req.body.email});
    if(emailExist) {
        console.log('Error2')
        return 'Error2'
    }
    console.log('2&')
    //Hash the password
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(req.body.password, salt)
    console.log('3&')
    //Create a new user
    const user = new User({
        name: req.body.name,
        email: req.body.email,
        password: hashedPassword
    })
    console.log('4&')

    //user.save(); 

    try{
        const saveUser = await user.save();
        res.send(saveUser);
        console.log('5&')
    }catch(err){
        res.send(err)
    }
});

在将其保存到数据库之前，它会检查验证以及数据库中是否已存在电子邮件。

当满足前两个条件并且如果已经使用电子邮件并且验证格式不正确时，它将数据成功发送到数据库中。

但是，当验证格式不正确或已经使用emaoil时，我希望前端的获取通知我。因此，我认为将获取的内容放入变量中将在不起作用的情况下输出某些内容。但是，即使提取不起作用，它也总是发送回一个空的json。那么，如何将变量从后端传递到前端？

通常在邮递员中，这是电子邮件已经存在时收到的。我如何在前端收到此消息？

Answer 1

在你的后端，

您应该返回有效的HTTP status code和json负载，以便前端可以正确理解。

对于无效输入，您可以返回带有正确json描述的400 Bad Request，并返回200 OK以获取有效的响应。

// for errors
res.status(400).send({error: 'Email already exists' })

// for successful responses
res.status(200).send({result: 'success' })

然后在前端，您可以解析此状态代码以了解它是有效/无效请求，并解析有效负载以向用户显示任何正确的消息：

const Submit = async (fname, email, pwd) => {
  try {
    let response = await fetch('http://127.0.0.1:2000/api/user/register', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(
        {
          name: fname.fname,
          email: email.email,
          password: pwd.pwd,
        },
      ),
    });
    const statusCode = response.status;
    const { error, result } = response.json();
    // do whatever you want with this info here
  } catch (err) {
    console.log(err);
  }
};

此外，请记住，由于fetch正在异步运行，因此您应在上述异步函数中使用await前缀，或使用Promises：

Answer 2

fetch返回一个您需要使用async / await处理的承诺

const Submit = = async (fname, email, pwd) => {
    const body = JSON.stringify({
        name: fname.fname,
        email: email.email,
        password: pwd.pwd
    })

    const headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    }

    const settings = {
        method: 'POST',
        headers,
        body
    };

    try {
        const fetchResponse = await fetch(`http://127.0.0.1:2000/api/user/register`, settings);
        const data = await fetchResponse.json();
        return data; // your response data
    } catch (e) {
        console.log(e)
        return e; // handle your error here
    }

}

Answer 3

提交功能中的提取API是异步的，这意味着console.log（）在提取完成之前先执行。

您可以使用asyn / await获取获取响应并将该响应发送到console.log（）。

// async function
async function fetchAsync () {
  // await response of fetch call
  let response = await fetch('https://api.github.com');
  // only proceed once promise is resolved
  return response;
}

将值从后端nodejs传递到前端反应本机

3 个答案: