Multiple Ways of Async Await Fetch API Call With Hooks (useState, useEffect) & Map | React JS

hey guys this is mjk from webstylepress if this  is your first time here I share useful stuff for   devs at this channel join this channel by hitting  subscribe button and bell icon let's fetch some   data from lively source and try out fetch with a  sink of it in multiple ways so fetch is an API of   the babyís the fetch API provides an interface  for fetching resource it will seem familiar to   anyone who has used xml httprequest but the  new api provides a more powerful and flexible   feature set so first we use this one XML HTTP  request but fetch API is more powerful and now   you should not use this method and fetch API  is a good way to go and browsers support it   you do not need additional any kind of package or  something for this it will work out of the box so   fetch provides a generic definition of request  and response fetch is a call and it provides   request and response and you may have also used  ex yours and that is also a good package but if   you don't want to use any package then this is  a good way to fetch resource from an in live   API your resource like that okay so fetch  JavaScript consent network requests to this   server and load new information whenever it's  needed for example we can use network request   to submit an order load user information receive  latest updates from this server fetch method is   modern and versatile alright so let response evade  fetch URL let's see here so this is the async and   oh wait there's a special son text to work with  promises in a more comfortable fashion called a   sink evade so a sink is a keyword async functions  so functions can be a sink and a sink is a keyword   it can be placed before a function so you place  the async before the function and the world is   sink before a function means one simple thing a  function always returns a promise and then the   evade works only inside async functions so this  a sink keyword will be outside before function   and inside it there will be await so Avett keyword  this is also is deserved special keyword it makes   JavaScript wait until the promise settles and  returns its result so it is good for fetching   data right so it can be used with the fetch and  this is the GSN placeholder fake online trust   API you can use these URLs to fetch the data we  can use this URL and we can use we can fetch this   data in our example this app created by using  create react app so the festive data we need   store it in this state and we need to call that  function or call inside who called use effect   or component it did mount but we are not using  class-based components so use effect a new state   will work let's use hooks use state use effect  so let's use use State here we will store our   data and we will set the data data and send data  all data will be stored here and we can change   that data by using this parameter so is equal to  euros state so it will be an object so let's use   this and okay so this will be our data state or  storage and below this we will have a use effect   and whose effect will be like this and when you  use use effect oke always remember use this thing   right here like this always use this otherwise you  will end up in infinite loops okay here basically   dependencies can be injected the dependencies  that can trigger read and ring component so   even if you don't have any dependency use this  thing and leave it blank right okay so here will   be the get data let's create two functions get  data and load data and let's use this load data   function okay so const load data is equal to  arrow function and let's use fetch straightaway so fetch is promised based so fetch is  URL dot then and dot then so let's get   the response RESP ons a response header  function response dot Jason and then   let's catch this in data and then use  this thing set data set data this one   that we have got here from the response  this one right okay so let's try this so let's it will it will have stored here  because we hit this API endpoint and then   we'll take the response and convert it into  Jason and then we receive it in data and then   we are using this send data to store our data  in this parameter right and you can you know   to remove the confusion received data okay go  right there and now it will store it will be   stored here and then this function is being  called when the component will be mounted   and will be rendered and then this will  run and it should have been stored here   let's see what we are getting in console so we  have gotten either this is not the way to go   here this is the returned this cannot be let's  prove here and let's inspect and see what we   have got in console okay we have we got empty  array and then we have got ten records right okay to improve this call and to  introduce a sink and a weight to   this method what we can do is we can use  a sink here before this function call   okay this keyword here and then before  fetch we can use a weight and that's it here are our records let's display these records as well okay so  that is assigned a value but never used no   unused variables so we have not used this so  let's do this now so I want to call this data   from this one okay now it has got our data  and I am using it here let's map it dot map   and let's first each user TIFF use dot name I  believe there was name and let's see alright so   we'll call the name okay so this is complaining  that each child in a list should have unique   key frog so we have to provide the key so user  dot IT happy got the ID there maybe maybe let's control it and see what we  had got okay so we yeah we   have got the ID we've got the name alright within we can display more records from here user dot  a username and there is a username right okay so   this user is nothing really it can be a record  record so now we will use a record ID record   dot name and record dot username and it should  work fine because this was the data and it has   got list of data right so it has got records  this is an object right so we are mapping it   and we are naming kind of one record from it  and we can name it anything like user record   or anything and you can use it there then  okay so this is one example let's use another   so this was load data let's see create another  function and here we'll have function get data of K and s 1 so const api and our API the hit  is this one this your let's paste it inside   here and this is our API and then another  Const this will be our result fetch API ok   so you can use this URL inside this one like  this but I am breaking it apart I am using   a different approach and then I just told  this URL in the separate Const and then I'm   using fetch and then I'm giving this URL  to fetch to this fetch and then Const get   result so this was the result and let's  get result result dot JSON and then our   set data this one we want to store the data  here by using this so set data get results so we have got the errors okay so a  result door JSON is not a function   result test result result dot JSON  is not a function okay right so now   we use a sink of it yes why and say  guessing keyword before the function   and then we will use of it here before  the fetch and before what a result okay yes now it worked and let's say that results is not defined of this leaf it  is block scope even we can try it here nice so guys these are different ways you can use a  sink of it and fetch and as you can see just look   at this these methods are a little bit different  and this method required a sink in them and of   it otherwise it was giving us problem right okay  so see this this is a simple function with const   and then we used a dove function here and we use  a sink before it and then we used fetch with evade   well this thing works the doubt a sink innovate  this thing works and because it returns promise it   is fetch is promise based so we used fetch URL and  then dot then then response response toward jism   and then then we receive the data and stored it in  our state but this thing is different so this is   function and function name then we stored the URL  API URL in different Const then we use the fetch   and we stored the fetch request in another Const  and then we get the result and we converted that   into into JSON and then we stored the result so  these are a little bit different this method uses   arrow function and this is simple function so you  can use but our method that sorts you both will   work and here is simple fetch with async evade  and storing data in this state and then calling   dead data like this simple right okay practice is  the key guys practice is key keep practicing keep   improving that's it guys I hope you liked this  video if I missed anything or you have something   to add you can comment down below as questions  related to this topic and if you haven't already   subscribed subscribe to the channel and hit Belle  icon to receive updates join us on social media   links are in the description below stay tuned  for more updates I will see you in the next video

Channel: WebStylePress

Views: 31,008

Keywords: multiple api calls react, async await hooks, async await fetch api call, async await api call, fetch, FETCH API, api, api call, async, await, async await fetch, react fetch hook, asynchronous programming react, async functions, using javascript async await to fetch data, async await with fetch, async await error handling, async await react js, react async await, async await react, react fetch api, fetch api in react js, async await in react js, Async await javascript

Id: 9fr7ytpvybY

Length: 22min 4sec (1324 seconds)

Published: Thu Apr 02 2020