How to send the request body using Axios?

In this piece, we will learn how to send the request body in an API request using Axios. So without any further ado, let’s jump in!

Axios

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. Some of these features include:

• Request interceptors
• Custom instances
• Request timeouts and cancellations

Send Request Body Using Axios

We can send data to the server in different ways. We can utilize the request query parameter when we have to fetch data based on specific parameters. If we have to create, update, or delete data on the server, we need to use the request body.

Let's see how we can send a request body in an Axios POST request. We will do it in steps to make the process simpler.

STEP 1: Find an API

We need an API to learn how to send the request body via Axios. For this purpose, let’s use Microsoft Translator Text API from RapidAPI Hub. Please go ahead and subscribe to the API.

Subscribe to Microsoft Translator Text API

We will use the Detect endpoint of the Microsoft Translator Text API.

STEP 2: Install Axios

Create an empty directory and open it in your preferred code editor. Now create an index.js file in this directory.

Now run the following command in your project terminal:

sh
Copy
npm install axios

This will take a moment and install axios in your project.

STEP 3: Set Request Body

To set the request body using Axios, we can define an options object that takes a data key. The value of this key is what you want to send to the server via the request body.

js
Copy
const axios = require('axios');
const options = {
    method: 'POST',
    url: 'https://microsoft-translator-text.p.rapidapi.com/Detect',
    params: { 'api-version': '3.0' },
    headers: {
        'content-type': 'application/json',
        'X-RapidAPI-Key': 'your-rapidapi-key',
        'X-RapidAPI-Host': 'microsoft-translator-text.p.rapidapi.com',
    },
    data: [
        {
            Text: 'Ich würde wirklich gern Ihr Auto um den Block fahren ein paar Mal.',
        },
    ],
};

The options object also takes other keys like the HTTP method and headers, if any.

Since the Microsoft Translator Text API needs an array as a request body, we have set the value of data to an array containing an object.

STEP 4: Call the API

Let’s call the API now. We can use axios.request and provide it the options object.

js
Copy
axios
    .request(options)
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });

Now go ahead and execute the file by running the following command in the project terminal:

sh
Copy
node index.js

Alternate Way To Set Request Body

You can also set the request body directly using axios.post, axios.put, and axios.delete. The following is the syntax of how you can do it:

js
Copy
axios.post(api, data, config)

The data is replaced with an object or array sent to the server as the request body.

Let’s look at how we can update the code of our previous example to set the request body directly.

js
Copy
const axios = require('axios');
axios
    .post(
        'https://microsoft-translator-text.p.rapidapi.com/Detect',
        [
            {
                Text: 'Ich würde wirklich gern Ihr Auto um den Block fahren ein paar Mal.',
            },
        ],
        {
            params: { 'api-version': '3.0' },
            headers: {
                'content-type': 'application/json',
                'X-RapidAPI-Key': 'your-rapidapi-key',
                'X-RapidAPI-Host': 'microsoft-translator-text.p.rapidapi.com',
            },
        }
    )
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });

In this example, we have passed an array as a second parameter. This array is sent to the server as a request body via Axios.

Wrap Up

That’s all, folks! If you want to learn how to use Axios with React, I recommend you look at this piece.