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.
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:
Start with adding Axios to your project. We can install Axios with Node Package Manager using following command:
$ npm install axios --save
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
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); }); };
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.
What’s on your mind? Tell us a little bit about yourself and your question, and we will be in touch with you within 12 hours
Free eBook on Telemedicine Platform Development: All About Telemedicine
Download Free eBook Now!