how can we get post data from fetch function in react native to express api?

Question

Question:

How can we get post data from fetch function in react native to express api?

Issue Faced:

I tried the following process but didn't got those variables in back-end API.

How can the variables be achieved in the backend API? Any suggestions are highly appreciated.

Here is the reactive native fetch function:

REACT NATIVE FETCH FUNCTION:

 login = async () => {

   await fetch('http://192.168.1.160:8001/api/login', {
          method: 'POST',
          mode: 'cors',
          cache: 'default',
          header: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },

          body: JSON.stringify({
              email: this.state.email,
              password: this.state.password
          })
    })
    .then ((response) =>  response.json())
    .then ((res) => {//console.log(res);
        if(res.error === false){
            AsyncStorage.setItem('user', res.data);
            this.props.navigation.navigate('profile');
        } else{
           // alert(res.message);
        }
    })

  }

Express-API:

The express API is given below:

    module.exports = function (req, res) {
console.log('TEST',req.body);
  let { email, password } = req.body;

  let input = { email, password };

  const validator = loginValidator(input);

  if (validator.error) {

    return res.status(400).json({
      error: true,
      message: validator.error.details,
    });

  } else {

    models.users.findOne({
      where: { email: email }
    }).then(user => {

      if (!user) {
        return res.status(400).json({
          error: true,
          message: {
            key: 'email',
            text: MessageHelper.email_already_exist
          }
        });

      } else if (!bcrypt.compareSync(password, user.password)) {

        return res.status(400).json({
          error: true,
          message: {
            key: 'password',
            text: MessageHelper.password_not_valid
          }
        });

      } else {

         var token = jwt.sign({ userid: user.id },Config.get('jwt.privatekey'));
          models.users.update({ token: token },{ where: { id: user.id } }).then(function(result){ 
                return res.json({
                    error: false,
                    message: MessageHelper.user_token_updated,
                   token: token,  
                   data: {
                        user_id: user.id,
                        firstname: user.firstname,
                        lastname: user.lastname,
                        username:user.username,
                        email: user.email,
                        mobile: user.mobile,
                        token: user.token
                        }
                });
            }).catch(function(error){
                return res.status(400).json({
                    error: true,
                    message: error
                });
            })

      }

    });

  }

}

Answer 1

Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}