How to use Axios with different data formats? (2024)

Axios, a popular JavaScript library for making HTTP requests, provides a straightforward and adaptable way to interact with RESTful endpoints.

However, depending on the data type you're working with, you may need to modify your Axios usage to accommodate different formats like JSON or XML.

Using Axios with JSON data format

JSON data has grown to be the most preferred data format for APIs due to its simplicity. In this section, we'll look at how to send and receive HTTP requests using Axios and JSON data, as well as how to handle response data in JavaScript.

Sending a GET request with Axios and JSON data

To send a GET request with Axios and JSON data, use the axios.get() method and pass in the URL of the API endpoint from where you want to retrieve data. Let’s look at an example by using the Famous Quotes API from Rapid API Hub.

Once you are signed in, make sure you subscribe to the API.

js
const axios = require("axios");
const options = {
 params: { category: 'all', count: '2' },
 headers: {
 'X-RapidAPI-Key': 'your-api-key',
 'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com'
 }
};
axios.get('https://famous-quotes4.p.rapidapi.com/random', options)
 .then(function (response) {
 console.log(response.data);
See Also
Access and print a specific JSON valueHow to pass JSON values into React componentsFetching Data from APIs in React.jsfetch-json
 })
 .catch(function (error) {
 console.error(error);
 });

Sending a POST request with Axios and JSON data

To send a POST request with Axios and JSON data, you can use the axios.post() method and pass in the URL of the API endpoint you want to send data to, as well as the JSON data you want to send. For example:

js
const data = {
 name: 'John Doe',
 email: '[email protected]'
};
axios.post('https://example.com/api/data', data)
 .then(response => {
 // Handle successful response
 console.log(response.data);
 })
 .catch(error => {
 // Handle error
 console.error(error);
 });

Using Axios with XML data format

Let’s see how we can use Axios with XML data format, including sending GET and POST requests.

Sending a GET request with Axios and XML data

To send a GET request with Axios and XML data, we can use the axios.get method with the responseType option set to document.

We will use the Routing Number Bank Lookup API from Rapid API Hub in this example.

js
const axios = require("axios");
axios
 .get("https://routing-number-bank-lookup.p.rapidapi.com/api/v1/121000248", {
 params: { format: "xml", paymentType: "ach" },
 headers: {
 "X-RapidAPI-Key": "your-api-key",
 "X-RapidAPI-Host": "routing-number-bank-lookup.p.rapidapi.com",
 },
 responseType: "document",
 })
 .then(function (response) {
 console.log(response.data);
 })
 .catch(function (error) {
 console.error(error);
 });

Sending a POST request with Axios and XML data

To send a POST request with Axios and XML data, we can use the axios.post method with the request body containing the XML data. Here's an example:

js
const axios = require("axios");
const xmlData = `
<root>
 <name>John</name>
 <age>30</age>
</root>
`;
axios.post("http://example.com/api/data.xml", xmlData, {
 headers: {
 "Content-Type": "text/xml",
 },
}).then((response) => {
 console.log(response.data);
}).catch((error) => {
 console.error(error);
});

Wrap up

Axios is a powerful JavaScript library that provides an easy-to-use API for making HTTP requests. One of its most useful features is the ability to handle different data formats, including JSON and XML.

When making requests with Axios, it is important to specify the correct data format in the request headers and to set the responseType option to match the expected data format of the response.