React button connection with database through axios.post()

Question

I have 4 inputs and button which takes all data from them and sends to my PostreSQL database through axios.post() request. Not clearly understand how .then() is working. So, here is my button code which just calls this.addNewPainting function:

<button onClick={ this.addNewPainting }>Submit</button>

Here is my addNewPainting function:

addNewPainting() {
  axios.post(`http://localhost:333/api/add`, {
    title: this.state.titleInput,
    year: this.state.yearInput,
    size: this.state.yearInput,
    location: this.state.locationInput
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

Before this project, I used to put response.data to the array with this.setState, but now I have the database and I'm just stuck.

Here is my controller function:

add_painting: (req, res, next) => {
  const db = req.app.get('db');
  const { title, year, size, location } = req.body;
  console.log(title, year, size, location);

  db.add_painting([ title, year, size, location ])
    .then( () => res.status(200).send() )
    .then( () => res.status(500).send() );
}

And the endpoint:

app.post('/api/add', paintings_controller.add_painting);

I'm having a hard time understanding your question. Are you getting any errors? — Derek Hopper
– Derek Hopper, Commented Dec 28, 2017 at 0:12
DerekHopper Yes, that's the error: Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:87) — in43sh
– in43sh, Commented Dec 28, 2017 at 0:18

ArCiGo · Accepted Answer · 2017-12-28 19:02:45Z

For future reading (becase you requested it): I'm not an expert using promises, but it works similarly like the AJAX requests.

When you make a request to the server (GET, POST, PUT, etcetera), you're waiting for a response from this (a collection of data, a message, a succesful/unsuccesful POST/PUT/DELETE, etcetera). Depending of the response, you'll code the expected events (error, success, complete, etcetera).

In this case you're using axios, a new way to do AJAX requests. The equivalent way of the error/success/complete/... events is the then() function. Using this approach you can perform operations that makes new tasks or simply print a response message (in your case) of the server.

From MDN:

The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.

Let's suppose that we have this snippet of code in AJAX:

$.ajax(
{
    url : yourURL,
    type : 'POST',
    data : yourData,
    datatype : 'json',
    success : function(data) { 
        yourSuccessFunction(data); 
    },
    error : function(jqXHR, textStatus, errorThrown) { 
        yourErrorFunction(); 
    }
});

Using axios, you'll code something like this:

axios.post('/user', {
    YourData: yourData
}).then(() => { this.yourSuccessFunction() })
}).catch(() => { this.yourErrorFunction() });

in43sh · Accepted Answer · 2017-12-28 00:56:39Z

1

I just found the error. I was making a request to PORT 333 in my axios.post(), but the server was working on port 3333.

answered Dec 28, 2017 at 0:56

in43sh

9732 gold badges14 silver badges39 bronze badges

3 Comments

ArCiGo Over a year ago

I was thinking that you wanted to know how the then() works

in43sh Over a year ago

Well yeah, but because I don't understand how it's working, I thought that my app is not working because of .then(). So if someone had explained the reason for using it, I'd appreciate that.

ArCiGo Over a year ago

Check my answer. If you find useful my answer, vote it. If you want more examples, just tell me

Collectives™ on Stack Overflow

React button connection with database through axios.post()

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related