Understanding how to code ReactJS | Data Fetch using Axios

1. 14​NOVEMBER2018 Understanding how to code ReactJS | Data Fetch using Axios Written by ​Jalaj Sharma In this course section, we will understand how to fetch data from the server and display it on our page. Unlike Frameworks like ​Angular​, react does not have access to make http request built into it. And for me, this is actually a great thing as when we don’t need something, why to have it. To reach the server and fetch data, we do have other packages that can be included to a react app. There are options like Fetch, Request, Superagent etc, but my personal preference is Axios for this, which we are also about to explore. Though you can play around with others and use the ones you like.

2. Before getting started with this article, I would suggest you to go through the ​part 1​ of this course series which explains how to setup react and best practices when working around with react. Also going through ​part 2​ will be helpful for you to understand the code snippets added here, which is about react router and how it simplify life for us. Let’s start by installing axios to our project first using npm. For the purpose, I have created a products.json file which I have also pushed to the github repository. We can use data from the products.json file directly by importing it to our component, but since we want to make use of axios and understand how we can fetch data from the server and handle asynchronous behavior, we will be using the products.json file on our repository instead of using local file. Products.json This is a simple basic object I have created which has information of product. It has a id to uniquely identify an object and other information that we will need about the product.

3. I have created a services folder with a file ApiServices.js. This will be a central place from where we will make calls to the server. For this small project, we don’t have to make several calls, but for bigger projects, this is going to be beneficial to manage coding standard and centralization. ApiServices.js In here, I have imported axios to the file. I have stored server link in a constant named endPoint. Here we have a function named GetRequest which we are exporting and it receives a route which we will send every time we make a call to the server. It uses get() method provided by axios to fetch data. Similarly, we have post(), delete(), update() and more. We will return the result from here and by using promises, we will extract it in our component. Since we are only fetching data here using a get() request, I have also added code in the ApiServices using which you can make post, update and delete requests too. Now let’s import this function in our Products.js file and fetch data. We will also add functionality to add items to the list of selected items.

4. Products.js

8. Here, in Products.js, inside componentDidMount lifecycle hook, I am making a server request using GetRequest method created in ApiServices.js and calling for products.json file on server which is in our github repository. After the promise is resolved, I am storing the result in state named products and displaying the records in our view. With this, we have successfully learned how to make a http request using axios in react. How easy, right? I have created a method to add and remove items from the selection. For now, I am not writing any code for quantity management to let this article focus more on axios and http requests. Our programme do make the calculation for total price whenever any product is added or removed from the selections. You can download source code​​ which is available publicly for you and have a read at the code and play around with it. We have also replaced the static id passed when redirecting to the product route. It will now take the id of the product that is clicked and go to the product route with the id of that specific product.

9. Product.js

10. In this file, I have extracted the id using params inside props and displayed the required fields for that specific product. Here again I used axios to fetch the data using our service method GetRequest. Though this is not a very preferred way of doing it as in real scenarios we will have a different API for individual product, but we can move with this approach for now since we are not working with API’s and just creating an environment to handle asynchronous behavior similar to be in any real API.

11. So here in this section of our Understanding how to code ReactJS series, we have learned how to fetch data from the server in a real server environment using axios. In part 4 of this series, we will learn how to implement the big term, redux, into our project and simplify all the aspects of its workflow. Ready for that? Are people really scaring you by the term redux? Let’s walk around and understand what is redux and I ensure you, it’s just a big term with a very simple workflow. FOR more read our blog :- http://blog.thinkwik.com/