Onjsdev

Share


Axios Put Request


By onjsdev

Mar 29th, 2024

In Axios, a PUT request is easily sent wih the axios.put method. It accepts a URL as its first argument, data as its second parameter and options object as its third argument.

To get started, you need to install Axios. You can install it using npm:

npm install axios

Here's how to make a PUT request with Axios:

axios.put(url, data, config)
  .then((response) => {
    // Handle successful response
    console.log(response);
  })
  .catch((error) => {
    // Handle error
    console.error(error);
  });

Let's break down the code:

  • url: The URL of the resource you want to update.
  • data: The data to be sent with the request. This can be an object, array, string, or any other JSON-serializable value.
  • config: An optional object containing additional configuration options for the request, such as headers and timeout.
  • then(): This callback function is called when the request is successful. It receives the response object as an argument.
  • catch(): This callback function is called if there is an error with the request. It receives the error object as an argument.

Let's imagine you have a user resource stored in an API. You want to update the user's name using a PUT request. Here's how you can do it:

const url = 'https://api.example.com/users/1';

const updatedUserData = {
  name: 'John Doe',
};

axios.put(url, updatedUserData)
  .then((response) => {
    console.log('User updated successfully!');
  })
  .catch((error) => {
    console.error('Error updating user:', error);
  });

How To Handle Response And Error

When making a PUT request with Axios, you can access information about the response and errors through dedicated properties on the response and error objects respectively. Here are the key properties you can utilize:

Success Response Object Properties

  • data: The data returned by the server in the response body. This can be an object, array, string, or any other JSON-serializable value.
  • status: The HTTP status code of the response. For successful updates, this is typically 200 (OK).
  • statusText: A human-readable description of the status code.
  • headers: An object containing the response headers sent by the server.
  • config: The original configuration object used to make the request.
  • request: The original request object used to send the request.

Here is an example:

axios.put('/users/1', { name: 'John Doe' })
  .then((response) => {
    console.log('Response data:', response.data);
    console.log('Response status:', response.status);
    console.log('Response headers:', response.headers);
  });

Error Object Properties:

  • message: A human-readable error message.
  • name: The name of the error type.
  • code: An error code specific to the Axios library.
  • config: The original configuration object used to make the request.
  • request: The original request object used to send the request.
  • response: The response object (if available).
  • isAxiosError: A boolean flag indicating whether the error originated from Axios.

For example:

axios.put('/invalid-url', { name: 'John Doe' })
  .catch((error) => {
    console.error('Error message:', error.message);
    console.error('Error code:', error.code);
    if (error.response) {
      console.error('Response status:', error.response.status);
    }
  });
  

Conclusion

That's it! You've successfully made a PUT request using Axios. You can adjust the code according to your specific API and data requirements.

Thank you for reading