Axios PUT request to server

Question

I read the documentation on axios on PUT request and it seems similar to a GET request. However, there wasn't an example code like GET, but I assume it is similar to how to do a GET request. I seem to have issue making a PUT request using axios. This is what I have so far with a test server that I am using:

axios.put('http://localhost:8080/cats')
  .then(res => {
    this.setState({
      cat: res
    });
  })
  .catch((err) => {
    console.log(err);
  })

Basically, I am trying to select an item and make changes to it.

Answer 1

I think you don't understand how Axios and HTTP requests work. When making a PUT request, you have to send the data you want to "put" into the item. You seem to think that when you make a PUT request you will receive the item back which you can then edit and have it save automatically, which is not true.

Image that you had a whole bunch of cats, and they had names, images, and descriptions about them. Now say you want to update the name of the cat which is identified by the number 1 (that's its ID).

Here is an example of using a PUT request (through Axios) to update that cat's name:

axios.put('https://example.com/cats/1', {
    name: 'Tophat Cat'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

See how I had to specify which cat I wanted to update (by providing the unique URL for that cat) and also supply the specific data I want updated (the name)? Now it would be up to your server to see that it received a PUT request for the first cat, and that the data says to update the name to "Tophat Cat".

Then the server would send a response (it could be anything from "The update was successful." to a JSON representation of the updated cat's data.

Remember, a PUT request should only be used for updating data that already exists. If you want to add new data (which is what it looks like a little bit in your example, since you were pointing the request to just /cats without an ID), you should instead use a POST request. POST requests are intended for adding new data and PUT requests are intended for updating existing data.

The POST request would look very similar to the PUT request example above, but with some important changes:

axios.post('https://example.com/cats', {
    name: 'Catsandra',
    image: 'https://example.com/images/catsandra.jpg',
    description: 'Catsandra is the fanciest cat in town!'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(err);
  });

Now the request is going to just /cats which is typical in a REST API (it can't be pointed at a specific cat ID because the cat doesn't exist yet). It also specifies all the data needed to create a new cat. In the PUT request we only included what we wanted to update. In a POST request the other data doesn't exist yet so we have to specify everything.