Axios - HTTP POST Request Examples

Below is a quick set of examples to show how to send HTTP POST requests to an API using the axios HTTP client which is available on npm.

Other HTTP examples available:

• Axios: GET, PUT, DELETE
• Fetch: GET, POST, PUT, DELETE
• React + Axios: GET POST, PUT, DELETE
• React + Fetch: GET, POST, PUT, DELETE
• Vue + Axios: GET, POST
• Vue + Fetch: GET, POST, PUT, DELETE
• Angular: GET, POST, PUT, DELETE
• Blazor WebAssembly: GET, POST

Installing axios from npm

With the npm CLI: npm install axios

With the yarn CLI: yarn add axios

Simple POST request with a JSON body using axios

This sends an HTTP POST request to the Reqres api which is a fake online REST api used for testing, it includes a generic /api/<resource> route that supports POST requests to any <resource> and responds with the contents of the post body and a dynamic id property. This example sends an article object to the /api/articles route and then writes the id from the response to the #post-request .article-id element so it's displayed on the page.

// Simple POST request with a JSON body using axios
const element = document.querySelector('#post-request .article-id');
const article = { title: 'Axios POST Request Example' };
axios.post('https://reqres.in/api/articles', article)
    .then(response => element.innerHTML = response.data.id);

Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request.js

POST request using axios with async/await

This sends the same POST request with axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

(async () => {
    // POST request using axios with async/await
    const element = document.querySelector('#post-request-async-await .article-id');
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post('https://reqres.in/api/articles', article);
    element.innerHTML = response.data.id;
})();

Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-async-await.js

POST request using axios with error handling

This sends a POST request with axios to an invalid url on the api then writes the error message to the parent of the #post-request-error-handling .article-id element and logs the error to the console.

// POST request using axios with error handling
const element = document.querySelector('#post-request-error-handling .article-id');
const article = { title: 'Axios POST Request Example' };
axios.post('https://reqres.in/invalid-url', article)
    .then(response => element.innerHTML = response.data.id )
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error('There was an error!', error);
    });

Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-error-handling.js

POST request using axios with set HTTP headers

This sends the same POST request again using axios with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header.

// POST request using axios with set headers
const element = document.querySelector('#post-request-set-headers .article-id');
const article = { title: 'Axios POST Request Example' };
const headers = { 
    'Authorization': 'Bearer my-token',
    'My-Custom-Header': 'foobar'
};
axios.post('https://reqres.in/api/articles', article, { headers })
    .then(response => element.innerHTML = response.data.id);

Example Axios POST request at https://stackblitz.com/edit/axios-http-post-request-examples?file=post-request-set-headers.js