How to get console log from axios promise

Question

This is driving me crazy. I cannot see the response object from my axios POST request.

import React, {
  Component
} from 'react';
import axios from 'axios';

class SignUp extends Component {
  state = {
    name: '',
    email: '',
    password: ''
  };

  handleNameChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  handleEmailChange = e => {
    this.setState({
      email: e.target.value
    });
  };

  handlePasswordChange = e => {
    this.setState({
      password: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const {
      name,
      email,
      password
    } = this.state;
    const user = {
      name: name,
      email: email,
      password: password
    };
    axios
      .post('http://localhost:7777/signup', {
        user
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
    return ( <
      form className = "form-signin"
      onSubmit = {
        this.handleSubmit
      } >
      <
      h2 className = "form-signin-heading" > Please sign up < /h2> <
      label htmlFor = "inputName"
      className = "sr-only" >
      Name <
      /label> <
      input type = "name"
      name = "name"
      onChange = {
        this.handleNameChange
      }
      id = "inputName"
      className = "form-control"
      placeholder = "Name"
      required /
      >
      <
      label htmlFor = "inputEmail"
      className = "sr-only" >
      Email address <
      /label> <
      input type = "email"
      name = "email"
      onChange = {
        this.handleEmailChange
      }
      id = "inputEmail"
      className = "form-control"
      placeholder = "Email address"
      required /
      >
      <
      label htmlFor = "inputPassword"
      className = "sr-only" >
      Password <
      /label> <
      input type = "password"
      name = "password"
      onChange = {
        this.handlePasswordChange
      }
      id = "inputPassword"
      className = "form-control"
      placeholder = "Password"
      required /
      >

      <
      button className = "btn btn-lg btn-primary btn-block"
      type = "submit" >
      Sign up <
      /button> <
      /form>
    );
  }
}

export default SignUp;

Someone please tell me what I am missing. I am getting the server console messages. But I cannot see the message in my browser developer tools.

Here is my backend code.

const express = require('express');
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

app.use(bodyParser.json());
app.use(cors({
  origin: "http://localhost:3019"
}));

app.post('/signin', function(req, res) {
  let useremail = req.body.email;
  let password = req.body.password;
  if (useremail && password) {
    console.log('success')
  } else {
    console.log('Failure');
  }
});

app.post('/signup', function(req, res) {
  let userfullname = req.body.fullname;
  let useremail = req.body.email;
  let password = req.body.password;
  console.log(`
    Thank you ${userfullname} for signing up, 
    your login credentials are 
    login: ${useremail}
    password: ${password}  
  `)
});

app.listen(7777, function() {
  console.log("Started listening on port", 7777);
})

Answer 1

You need to ensure that your request handlers return a response, per request.

For instance, you could send a JSON response to signal to the client/browser that the request has been processed and completed by doing something like this:

app.post('/signin', function(req, res) {
  let useremail = req.body.email;
  let password = req.body.password;
  if (useremail && password) {
    console.log('success')
  } else {
    console.log('Failure');
  }

  /* 
  Add this: send a json response to client 
  */
  res.json({ message : 'sign in request completed' });
});

app.post('/signup', function(req, res) {
  let userfullname = req.body.fullname;
  let useremail = req.body.email;
  let password = req.body.password;
  console.log(`
    Thank you ${userfullname} for signing up, 
    your login credentials are 
    login: ${useremail}
    password: ${password}  
  `)

  /* 
  Add this: send a json response to client 
  */
  res.json({ message : 'sign up request completed' });
});

In addition to json(), the express framework's Response interface offers other response methods such as send() and end() that may be better suited to your use case.

The key concept here is that an incoming request should have a corresponding response sent back to the client. This allows to the client to correctly respond to, and resume from, network requests sent to your sever.

Answer 2

You have to invoke res.json('Success'); atleast to see any response. Right now the backend API code doesn't response on both the API's

So the modified code can look like

const express = require('express');
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

app.use(bodyParser.json());
app.use(cors({
  origin: "http://localhost:3019"
}));

app.post('/signin', function(req, res) {
  let useremail = req.body.email;
  let password = req.body.password;
  if (useremail && password) {
    res.json({status:'Success'});
  } else {
    res.json({status:'Failed'});
  }
});

app.post('/signup', function(req, res) {
  let userfullname = req.body.fullname;
  let useremail = req.body.email;
  let password = req.body.password;
  res.json({messahge:`
    Thank you ${userfullname} for signing up, 
    your login credentials are 
    login: ${useremail}
    password: ${password}  
  `})


});

app.listen(7777, function() {
  console.log("Started listening on port", 7777);
})