將值從后端 nodejs 傳遞到前端反應原生

Question

我的前端在 React Native 中完成，后端在 nodejs 中完成。 它是一個應用程序，要求用戶注冊（電子郵件、密碼、姓名、電子郵件等），然后使用 mongoose 將數據發送到數據庫 (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')
  }
  
  
};

它只接受用戶輸入的名字、電子郵件和密碼，並使用 fetch 將其發布到 API。 一切正常，除了最后一行：console.log("this is the result :" + 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 通知我。 所以我認為將我的提取放在一個變量中，如果它不起作用，它會輸出一些東西。 但是，即使提取不起作用，它也總是發回一個空的 json。 那么，如何將變量從后端傳遞到前端？

通常在郵遞員中，這是我在電子郵件已經存在時收到的內容。 我怎樣才能在我的前端收到這個？

Answer 1

在你的后端，

您應該返回有效的HTTP 狀態代碼和 json 有效負載，以便您的前端正確理解。

對於無效輸入，您可以返回400 Bad Request並帶有正確的 json 描述，並返回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

提交函數中的 fetch API 是異步的，意味着 console.log() 在 fetch 完成之前執行。

您可以使用 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;
}