dimanche 11 octobre 2020

How to handle net::ERR_CONNECTION_REFUSED in Axios - Nodejs

I received the ERR_CONNECTION_REFUSED when chose the Room on the dropdown list and clicked on the get room button. Below is my code

In front end

class Dashboard extends Component {
    constructor(props) {
      super(props);
      this.state = {
        roomID: ''
      };
  }

  handleChange = (event) => {    
    this.setState({roomID: event.target.value}); 
  }

  handleSubmit = (event) => {
    console.log('Room chosen is: ' + this.state.roomID);
    event.preventDefault();

    axios.get(`https://localhost:8080/room_selected`)
      .then(function(response){
        console.log(response);
      })
      .catch(function(error){
        console.log(error);
      })
      .then(function(){

      });
  }
render() {
<form>
                <Card
                  plain
                  content={
                    // <div>
                      <FormGroup controlId="formControlsSelect">
      <ControlLabel>Select Room Number</ControlLabel>
      <FormControl componentClass="select" placeholder="select" value={this.state.room} onChange={this.handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </FormControl>
      <div style=>
      <Button onClick={this.handleSubmit} class="btn btn-secondary" justify-content="center">Get Room</Button></div>
    </FormGroup>    
                  }

                />
              </form>
}

In backend

app.get('/room_selected', function (req, res){
    var client = 'a@gmail.com';
    var room = 'Room 1';

    var query = connection.query ('SELECT ClientID FROM clientDevices WHERE DeviceName = ?', [room]);
    if (client == query[0].ClientID){
        res.send('Success');
    } else {
        res.send('The selected room does not have a device attached');      
    }
});
console.log("Listening on port 8080");
app.listen(8080);

Are there any ways to handle this error and also can get the user to receive data from the backend to the frontend? Thanks a lot!

Aucun commentaire:

Enregistrer un commentaire