How to Send a Raw Data Body to an Axios Request in React Native?

Every frontend developer needs to interface with REST API at some point. Axios is the most common way for developers to communicate with servers through HTTP protocol. We all are familiar with Axios, as it is the most popular JavaScript library used to make HTTP requests. Axios supports promise-based API, and thus we can take advantage of more readable asynchronous code using async and await.

Using Axios with react native is simple, but sending raw data body to an Axios request is a common problem with developers. In this article, we will see how to send a raw data body to Axios post requests.

Why Axios?

Many developers prefer Axios over fetch for its ease to use. Axios is a most popular js library due to its key features. Key features for Axios are as follows:

• Axios can be easily installed as it is a stand alone third party package.
• Axios supports built-in Cross-site Request Forgery(CSRF) protection .
• Axios data contains objects.
• Axios automatically transforms JSON data.
• Axios supports request timeout and canceling request.
• Axios has the ability to intercept HTTP requests which helps in getting access to request headers and bodies, and response headers, to cancel, and redirect requests and to modify request and response header.
• Axios also have built-in support for download or upload progress.
• Axios supports old browsers too.

Installation

Start with adding Axios to your project. We can install Axios with Node Package Manager using following command:

$ npm install axios --save

Making Requests

import axios from ‘axios’;

POST Request Process

The HTTP post request is made using axios.post(). Let’s take an example of a login form where we need to send email and password as data to the server. Here email and password need to be sent as raw data to the server.

Axios post request params is an object of key/value pairs which we will send as data to post requests. As we need to send raw data, the object is wrapped in the JSON.stringify() method. The JSON.stringify() converts a JavaScript object or value to a JSON string.

const params = JSON.stringify({

"email": email,

"password": password,

});

Now we will use axios.post() method to make a post request. Here we will send three parameters. First we’re passing the url of the service endpoint. Second we’re passing object params which we created above and lastly we will pass headers to the post request. To pass raw data body content-type should be application/json.

axios.post(url, params,{

"headers": {

"content-type": "application/json",

},

})

Also Read: 5 Most Common React Native Issues That Starters Face

Handling Response

Once the post request is made, Axios returns a promise which is either success or failure depending on the response of the backend. To handle this response we will use the then() method.

axios.post(url, params,{

"headers": {

"content-type": "application/json",

},

})
.then(function(response) {

console.log(response);

})

.catch(function(error) {

console.log(error);

});

};

Wrapping Up!

Using Axios in React Native is the most popular way to interface with REST API, but many developers face problems while sending raw data body with the post request. In this article, we took a good look at this issue. Here we saw how to send raw data body in Axios post request in React Native. I hope this article helps you to understand how to send raw data body to an Axios post request to React Native. Get in touch with us if you want to hire react native developers.