How to make POST Requests with Axios in JavaScript?

Here is a brief overview of Axios.

Axios

You can use different ways to make API calls in your applications. You can choose either the built-in fetch API or third-party libraries. In the latter case, Axios is one of the most popular data fetching packages available on npm.

Axios is an open-source, promise-based HTTP client. It uses JavaScript’s promises to send HTTP requests and manage their responses. Moreover, it offers additional features for fetching APIs that are not available in the basic Fetch API.

To use Axios, you need to install it using npm or yarn.

sh
Copy
npm install axios

Once installed, import it into your JavaScript file.

js
Copy
import axios from 'axios';

With that said, let’s see how we can make a POST request using Axios.

Making a POST Request With Axios

Axios provides a function for each HTTP request method. For POST requests, you can use the axios.post method, which looks like this:

axios.post(url, data, config)

As you can see, it takes these three parameters.

• url: The URL of the API endpoint.
• data: Object storing the data being sent to the API.
• config: Object which contains the header information.

Here is a quick example of an Axios POST request that creates a new user.

js
Copy
const response = await axios.post('https://rapidapi.com/learn/api/rest', {
	name: 'John Doe',
});
console.log(response.data);

Try it yourself in this interactive component to see the response.

How to Send Data in Axios POST Request?

Like the above example, we can specify our data in an object and pass it as a parameter to axios.post.

js
Copy
axios
	.post('https://rapidapi.com/learn/api/rest', {
		// Data to be sent to the server
		firstName: 'John',
		secondName: 'Doe',
		email: 'jd@gmail.com',
	})
	.then(response => {
		console.log(response.data);
	})
	.catch(function (error) {
		console.error(error);
	});

The same request using async/await will look like this:

js
Copy
try {
	const response = await axios.post('https://rapidapi.com/learn/api/rest', {
		// Data to be sent to the server
		firstName: 'John',
		secondName: 'Doe',
		email: 'jd@gmail.com',
	});
	console.log(response.data);
} catch (error) {
	console.error(error);
}

For cleaner code and better readability, use variables and pass them as parameters like this.

js
Copy
try {
	const url = 'https://rapidapi.com/learn/api/rest';
	const data = { firstName: 'John', secondName: 'Doe', email: 'jd@gmail.com' };
	const response = await axios.post(url, data);
	console.log(response.data);
} catch (error) {
	console.error(error);
}

How to Send Headers in Axios POST Request?

To send any headers, we can pass an object containing the headers in the config parameter of axios.post. It will look like this in code:

js
Copy
try {
	const url = 'https://rapidapi.com/learn/api/rest';
	const data = { firstName: 'John', secondName: 'Doe', email: 'jd@gmail.com' };
	// Specifying headers in the config object
	const config = { 'content-type': 'application/json' };
	const response = await axios.post(url, data, config);
	console.log(response.data);
} catch (error) {
	console.error(error);
}

That’s pretty much it. You are all set to make POST requests with Axios.