Using Async/Await with the Fetch API - JavaScript Tutorial

hey guys hey going my name is dom and just a quick video today i'm using a sync awaits with the fetch api so uh the reason for today's video is because uh the fetch api is probably the most commonly used javascript function which takes advantage of promises therefore you can quite easily simplify and clean up your code by using a sync await instead of a bunch of dot events when it comes to using promises so i do assume you have some sort of prior knowledge sorry our knowledge in using the fetch api if not i've got plenty of videos on doing so if you want to check those out but let's now take a look at a quick example of using async awaits with the fetch api so inside the text editor right here i've got this index.html file and i've linked up this main.js file i've also got right here a users.json file inside the data directory containing a few users okay so let's go inside the main.js and we're going to be defining an asynchronous function to load our users okay so right here we can say async function and call this load users okay so this one right here is going to return our array of users okay so we can quite simply now because we've actually because we've specified this right here as being async we can now take advantage of the await keyword okay so using a wait we're able to wait until a promise has been settled so for example we can say consts response is equal to then we can say await then pass through here fetch we're going to be fetching of course data forward slash users dot json just like that okay so now if i was to console.log response just like that we should now see the response object that came from the fetch result okay so this right here is the equivalent of doing this fetch data users.json once again then saying dot then then having the response inside here so this right here as we can see it's obviously three lines long compared to one line and of course um it is arguably a lot cleaner using a weight right here okay so let's just console.log the response and we're also going to be saying just down here document.addeventlistener as soon as the dom content has loaded so basically as soon as the document is ready to go we're going to also run this a sync function because we need to essentially load our data so we're going to be saying right here try then we can say const data is equal to await then we can say load users you know what let's call this one users okay now you know what i might actually i might actually just say up here let's use this equal to an empty array just like that then i can just reassign the value of users then i can grab the error if there was one and i can simply say console.log error okay then i can just say log once again and then log out the actual error message then lastly i can say console.log then we can pass through users right here so now once the document has loaded this right here is gonna run i can save this and refresh and we have something like this as we can see we have undefined as the users because of course we haven't actually returned anything from this function just yet but we have right here the response object now of course the advantage of having your you know a separate function for achieving users is that you can actually go inside here you can check the properties you can check all of these things before proceeding and possibly put some logic inside there okay so moving on to converting the data to be json it's quite straightforward let's go back inside here we're going to then say const uses is equal to await then response dot json this right here is the exact same thing that is happening we're simply awaiting the promise for converting the data to json or passing it as json then we can just simply down here return our users now once again because we are because we have this separate function we can quite easily go inside here we can do stuff with the users we can manipulate we can check things etc but in our case i just want to return the users so now we should see right here console log users this is going to return a promise because of course it is asynchronous so i can just save this and refresh and we get right here our users okay now what if there was an error with the parsing of json so for example let's go inside here let's uh add some random character at the top here so for example the character symbol let's save this and refresh and now we can see that we have caught the error using a sync awaits and of course the error message is just right there so of course here that try catch is working perfectly fine so obviously you may want to put your error handling inside here it's up to you personally i like to keep these functions lean as possible therefore i'm handling it inside the main area right down here let's put this back to normal and cover one last topic so that is going to be making this even shorter so if you don't care about manipulating or checking your data you can quite simply have a one-liner for returning this information we can say right here return then we can say awaits fetch once again passing through data users.json just like that then we can say dot json okay so here we are essentially we are awaiting the fetch results okay so right here this will be the response object then we are returning the promise for the json okay so now with this with this promise being returned we are then awaiting the results of that pass json right down here therefore once this is once this has been fulfilled or settled we have the users and of course we move on so now saving this and refreshing we can see we get the exact same result right there and of course alongside that the error handling is still going to work let's save this error refresh and now we get the error right there so that is how to use a sync awaits with the fetch api thanks for watching guys and i'll see you later

Channel: dcode

Views: 60,930

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, web development, web app, js, javascript, es6, ecmascript2015, https, http, ajax, xml http request, jquery, axios, fetch, get, post, response, json, parse, promises, promise, then, catch, asynchronous, async, function, return, resolve

Id: Yp9KIcSKTNo

Length: 7min 18sec (438 seconds)

Published: Thu Sep 03 2020