将值从后端 nodejs 传递到前端反应原生

Posted 2023-02-16

【中文标题】将值从后端 nodejs 传递到前端反应原生

【英文标题】：Passing value from backend nodejs to frontend react native

【发布时间】：2020-12-18 19:39:46

【问题描述】：

我的前端在 React Native 中完成，后端在 nodejs 中完成。它是一个应用程序，要求用户注册（电子邮件、密码、姓名、电子邮件……），然后使用 mongoose 将数据发送到数据库（mongodb）。

在我的前端；当用户按下按钮注册时，它会调用一个函数名称“提交”，您可以在下面找到：

    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')
  
  
  
;

它只接收用户输入的名字、电子邮件和密码，并使用 fetch 将其发布到 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)
    
);

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

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

但是，当验证格式不正确或电子邮件已被使用时，我希望前端的 fetch 通知我。所以我认为将我的 fetch 放入一个变量中，如果它不起作用，它会输出一些东西。但是，即使 fetch 不起作用，它也总是会发回一个空的 json。那么，如何将变量从后端传递到前端？

通常在邮递员中，这是我在电子邮件已经存在时收到的内容。我怎样才能在我的前端收到这个？

【参考方案1】：

提交函数中的获取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;

【讨论】：

数据对应的是什么？

【参考方案2】：

在您的后端，

您应该返回有效的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：

【讨论】：

第一个代码仍然给出一个空字符串，而在第二个代码中有一个我似乎找不到的语法错误...

你用邮递员测试过你的后端API吗？它仍然返回一个空字符串吗？

是的，在邮递员上它可以工作并返回一个空字符串！！

所以我想知道如何在后端和前端之间传递参数，以便能够告诉我的前端在出现特定错误时如何采取行动

对于第二个代码，这是我的输出：这是结果：[object Promise] 但它对我没有多大帮助

【参考方案3】：

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
    

【讨论】：

你确定它是正确的吗？因为它不适用于我的代码

控制台在返回语句之前记录数据console.log(data)时得到的结果

它会返回我稍后存储在我的数据库中的数据，但如果有一个条件不起作用（例如：已使用电子邮件），那么它不会返回任何内容，我的目标是传递一个变量从我的后端到我的前端告诉我哪个条件没有通过

我用邮递员的照片编辑了我的问题以使其更清晰

问题是您从服务器返回计划文本并尝试对其进行解析，如果您使用的是 express 一个，则服务器执行 res.json( your response data here );