Onjsdev

Share


Axios Post Request


By onjsdev

Feb 16th, 2024

A POST request is used to submit data to servers and APIs. With the Axios.post method, you can easily send a HTTP POST request moreover you can easily attach body and header data to the request. Let's see how it works.

How To Install Axios

If you do not have Axios installed on your machine, Axios can be easily installed via npm (Node Package Manager) or yarn.

npm i axios

How To Make An Axios POST Request

Next, you can make the POST request using the axios.post() method. This method takes two arguments: the URL you want to send the request to and the data you want to send.

The data can be in various formats, such as JSON, URL-encoded form data or plain text.

Here's an example:

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

In the above example, we are sending a POST request to https://api.example.com/users with an data object containing the name and email properties.

The axios.post method returns a Promise, this is why we use the then() method to handle the successful response and the catch() method to handle any errors.

How To Handle Axios Response and Error

When the POST request is successful, the then() callback will be executed. The response object contains various properties such as status, headers, and data. You can use these properties as per your requirements.

Here's an example of handling the response:

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
  .then(response => {
    console.log('Status:', response.status);
    console.log('Data:', response.data);
    console.log('Headers:', response.headers);
  })
  .catch(error => {
    console.error(error);
  });

In case of an error, the catch() callback will be executed. The error object contains properties such as message, status, data, and headers.

Here's an example of handling an error:

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Status:', error.response.status);
    console.error('Data:', error.response.data);
    console.error('Headers:', error.response.headers);
  });

How to Send Headers with Axios Post Request

In addition to sending data, you may often need to include headers in your POST requests. Headers provide additional information to the server, such as authentication tokens, content types, or custom metadata.

To include headers in your POST request with Axios, you can pass an optional headers object as a third parameter to the axios.post method. The headers object should contain key-value pairs representing the header names and their respective values.

Here's an example of how to send headers along with a POST request:

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
}, {
  headers: {
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

In this case, the headers object contains two headers: Authorization and Content-Type. You can add any number of headers as per your requirements.

Conclusion

Axios provides a simple API for making any type of HTTP requests. In this article, we have explored how to make a POST request.

Thank you for reading.