Блог

Мой интерфейс выполнен в React Native, а серверная часть — в nodejs. Это приложение, которое запрашивает у пользователя регистрацию (электронная почта, пароль, имя, email, …), а затем данные отправляются в базу данных (mongodb) с помощью mongoose.

В моем интерфейсе; когда пользователь нажимает кнопку регистрации, он вызывает функцию с именем «Отправить», которую вы можете найти ниже:

     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(результат)). Он всегда возвращает пустой 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('1amp;')
    //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('2amp;')
    //Hash the password
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(req.body.password, salt)
    console.log('3amp;')
    //Create a new user
    const user = new User({
        name: req.body.name,
        email: req.body.email,
        password: hashedPassword
    })
    console.log('4amp;')

    //user.save(); 

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

Перед сохранением его в базе данных проверяется проверка и наличие электронного письма в базе данных.

Он успешно отправляет данные в базу данных при выполнении первых двух условий, и если электронная почта уже используется и формат проверки неверен, он не помещает ее в dataabse.

Однако, если формат проверки неверен или emaoil уже используется, я бы хотел, чтобы моя выборка в моем интерфейсе сообщала мне об этом. Итак, я подумал, что, поместив мою выборку в переменную, она выдаст что-то, если это не сработает. Однако он всегда отправляет обратно пустой json, даже если выборка не сработала. Итак, как я могу передать переменную из моего внутреннего интерфейса в мой внешний интерфейс?

Обычно в postman это то, что я получаю, когда электронное письмо уже существует. Как я могу получить это в своем интерфейсе?

На вашем сервере,

Вы должны вернуть действительный код состояния HTTP и полезную нагрузку json, чтобы ваш интерфейс был правильно понят.

Для недопустимых входных данных вы можете вернуть 400 неверных запросов с правильным описанием в формате 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);
  }
};
  

Кроме того, имейте в виду, что, поскольку выборка выполняется асинхронно, вам следует использовать префикс await в асинхронной функции, подобной приведенной выше, или использовать обещания:

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
    }

}

  

fetch 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;
}