In ReactJS, Axios is a library that serves to create HTTP requests that are present externally. It is evident from the fact that we may sometimes in React applications need to get data from the external source. It is quite difficult to fetch such data so that they can be normally shown on the website. Thus, it helps in retrieving the data thereby adding it to the state to facilitate the application whenever the requirement arises.
Additionally, react Axios is very easy to modify and is quite lightweight. It also works great with many other frameworks present today. The main purpose of using Axios is to get support for request and response interception, conversion of data into JSON format, and transform it. It also helps you in protecting XSRF forgery by default while you request cross-site access.
Here, you will learn the uses of Axios with JSON and API integration along with other applications in React.
Let's consider some prerequisites before proceeding.
Open the terminal of your system and type the below commands as shown.
Then, you'll need to run this command to install Axios.
This command will install axios into your directory. You can now carry out certain activities associated with the Axios library.
Getting GET request with Axios
To create a GET request into your project, type the following command below.
Here app.js is a sample file for your react code. After this, you can easily import the components of Axios, as shown below:
First, you need to import the React and Axios so that both can be used in the component. Further you require looking into the componentDidMount lifecycle hook and performing a GET request.
In the above code, we have first imported React and Axios components to get all the features into our code. You can then hook the componentDidMount() function for the lifecycle management to create a GET request. We have used axios.get URL, which will collectively get a promise to return an object. Inside this generated request you might get the data that is assigned. You can also get the status code and request logs under the res.request and res.status paradigm.
Getting POST request with Axios
Getting an HTTP request is quite an easy task just like the object config is passed to the Axios function. You can easily make such POST requests and trigger events with the help of given endpoints. Therefore, to perform an HTTP POST request in Axios, you will need to call the axios.post() function followed by passing two parameters i.e. the URI of the endpoint service.
These objects contain the same properties you want to send to the server. Hence, to create a simple POST request through Axios, the object must possess the property of URL. If no such method exists, the GET request value will be carried forward for the process. Take a look at a simple POST request example.
The above Axios snippet looks familiar to that of JQuery's Ajax function. This snippet orders Axios to send a POST request to log in with object values or keys and the axios will convert this piece of code in the JSON format. Later, this JSON converted data is passed onto the request body which is further processed into the components you have included in your react.