How to Fetch API in REACT | fetch API in React | React API Tutorial

hi everyone so today we'll learn about the how to P the data from an API India so before going [Music] to steps that how to P data from an API I would like to cover that how what is an API and how it's why should we learn it and how it's work okay so API stands for application programming interface basically it enables the exchange of information and functionality between different systems or you can say between different servers now coming to an example that if I will give an real life example I think it will help for you to relate that what is an AP and what does it how it's work okay now think you are going to a restaurant okay now you are in the restaurant and there is a letter comes to you and you don't need to go inside to the kitchen to prepare your meal you just give the instruction that what type of meals you want at your time so the restaurant's letter will be take your instruction and go to the kitchen and give this instruction to the S and according to your preference whatever the instruction you have given to the letter that will be followed by the safe and that safe will be give you the meal and on a table sorry not the waiter the not the the SE will give the meal to the waiter and the waiter will take the me to your table so here the waiter is the API you can assume that the data of the instruction which you given to the wer was given to the kitchen or given to the S and S follows the instruction and give and prepare your meal and that meal delivers to your table by the waer so waer is an API here so I I hope that you have visualized that part API do basically API exchange your information or exchange the data between two servers or between two different systems or between different website now coming to that how this like is this request means what what is HTTP request this AP is nothing than HTTP request okay so when web browser or a mobile app sends a message to a server it's known as an HTTP request and a HTTP request involves asking the server for specific data or you can say an ation and getting a response from the server and the server responds by interacting with the web pages and services so so you can say that in HTTP request we are like the client is asking for some something and the server role is here that it will give the response via API what it means the client give the HTTP request by API to the server and the server process it and give the response via API to the client so here we say that HTTP request is used or you can say that HTTP request is known as a API call okay so now coming to the types of sttp request now what are the types the various types of HTTP request there are four various types ofp request one is get another is post another is put and delete so these four sttp request methods are used to exchange or to communicate between client and server now coming to the get method this methods basically retra data from a specific API or specific end points example think like this you are asking for some information from the now coming to the post method and this method used to send the data with specific end point like for an example you can send a message or you can submit a button of a message form and the information will be added to the database that means whatever the data you are writing in the form or you fill up the form after submit button the data will be stored in the database and this insertion is done in database is comes under post method now coming to the put method this method is used to update a record or a data value at a designated endo mean you are asking to change some data in an existing information or you can say in an existing database there is some data and you want to update it in that scenarios the put method works now coming to the delete method this method itself saying to delete something that means to erase some data in a database or you are saying that discarding some unnecessary things from a database and for this scenario we are using delete methods I hope you have a basic idea about AP what is an APA what is an HTTP request types of HTTP requests so let's come to the topic how to p a data in there so coming to that point we'll use a fetch method to fet a data while I'm saying the fetch data means it's a get method okay so we'll use a get method or you can say we use an endo we which will give some data to us and the data will be shown in the UI okay and uh to complete this steps the first step of the first things we require that we have to we have to know that what is our API and so here I have taken an end point I will show you so if you see my browser here this is an a end which will gives you basically some data some Jon some Jon objects AR of objects and it consist of album id id Titan URL and thumbnail URL so basically this is get this is an API this API is a get method okay and it's fetch the all the album IDs and all you can say the photos of the albums with Json object and it give you the response that these are the album IDs let's album ID 1 2 3 4 5 6 and these are the title ID URL and so basically this is an API which will give you the data of the albums okay so what we will do here now we will use this API okay we will use this API we will fetch the data from this API in react and we will see how after fetching the data from the API how we will render it in our okay now for that I will create a component first that is app.js in app.js I will first give I will take a variable where this AP input will be stored there and after that I'll use fetch method and this fetch method will be fetch the data from this API so let's start now you can see I have a component app.js which is very basic component and it's WR welcome to react and this is the U you can see okay so let me take a variable let say let API okay and here what we store here here will store the end or you can say this is the fine fine this is the API end point okay now what we'll do now we will use effect so whenever my website whenever my website or page will render okay so it will run this first that what it run it will execute this fetch data API function okay where you pass the API that means whenever my compart will be render this FP will be execute first okay now coming to the function cost page data API here as we pass the API as an argument we'll pass here the argument URL so after that we'll use the fetch method to fetch the data from an APA now this fetch method always return promise what it WR it will return the promise so for that how to write that to fet the data from the API we'll first use fetch method and in there we'll pass the API name or can the URL in the fetch method and it will return a promise so that's why we will write here do then to handle that promise and uh it will return the response okay so we what we do we'll return resp. Jon we return in Jon format and after that this response to also return promise so for that we'll write again dot then and here we will we have the result so we can say the result now okay okay so now what we'll do we'll just print the value console do log res okay let me elaborate again so what we have done here basically we first we have taken the end point okay first we have like declared the end point this is the end point this is the AP name okay so after that we are declaring a function called fet F data which will be R which will be execute when the website will be rendered so first it will be execute this fet data API by passing the API and here we pass the URL in this fetch data API and in Fetch method we are passing the API end points and as it's written at promise so we have written that dot then to handle the promise so this response we are converting to Jon and also it will be written as a promise so for that we have written again then then we have printed in console okay let me show you the console this is the console boom you can see the response here that we have successfully fixed the data from an AP okay now we have printed it in the console.log as I have shown you that there is a album ID one album ID one and ID one there is title there is URL there is four five things in the J object okay now what we'll do we'll use the URL okay we'll use the URL to render the image render the photos in the UI okay for that what we need to do for that we need to store this response in a variable so for that I use St con photos so to store those photos I will take a variable called photos set photos now initially I will give a null array okay it will give an EMP not an EMP and after that whenever I have the data whenever I have the result I will set photo with the result so for this for this now we have for now we have the photos that means after fetching the data we have a variable called photos and this variable store all the photos or you can say all the array all the objects in an array in this photos then what we'll do then we'll just use then we just iterate this array using map method so in every item what we'll do in every item we return an image return return on image with SRC is equal to item dot item dot item do UR so and yeah and we will pass the key item do ID okay so now we'll see the magic [Music] here photos yeah now you can see that we have photos of all the albums you can see so basically what we have done here we have stored the whatever the data we F from the API we have stored that in an variable okay and after that while was storing like after storing this variable while it render the API sorry while it's render the UI it's actually iterate the all the J object and it's written an image with the SRC item. URL that means the URL which is present in the J object is written as an image in U so it will iterate and all the objects sorry all the Imes are shown in U right now so I hope you have understand how to P the data and how to store the data in a variable and how to render the data any we have learn these three things fetch the data store the data using US state effect we are fetching the data in Fetch method and this a very important thing that fetch always WR promises so to handle that we have used dot then and also the last Point how we have render the data from the used St variable I hope this tutorial will be helpful or you have learned learn things today and thank you

Channel: CodeMap

Views: 375

Keywords: How to fetch data, react js, React JS, API, fetch api, javascript, What is an API, How to, How to fetch API in react, react, trend

Id: Lwg5VBP3ZUI

Length: 16min 17sec (977 seconds)

Published: Wed Mar 20 2024