Fetch API in JavaScript for AJAX Developers

hey guys how you going my name is dom and today i'm super excited because i'm going to be showing you how to use the fetch api in javascript if you were like me a few years ago and you were scared of using fetch because of the promises and then catch things like that you were just comfortable using ajax so if that's you right now trust me fetch changed my life so hopefully today's video is gonna be beneficial to you so i'm gonna be showing you the exact same example of retrieving a simple json file using vanilla javascript ajax then jquery ajax then lastly the fetch api we're going to be writing it from scratch so i'm going to be showing you the two ajax examples quite quickly before moving on to the fetch example okay so a quick heads up a sink awaits you know used with fetch is a game changer so i've got a whole video dedicated to that if you want to watch that one after this one i'll leave it up to you but look that is an absolute game changer but anyway let's go inside the text editor right here we can see i've got this index.html file so we're going to be retrieving a simple json file like i mentioned and of course this file looks like this right here we've got this user.json containing information about me decode i'm online right now obviously whatever it's fine but anyway we've got this json file so let's take a look at a simple ajax example let's go down here and take a look at this code so as we can see we are simply firstly creating our request object then once the response comes back we're saying let's grab the response text and convert it from json into a javascript user object then we are simply logging out that user to the console down here we're saying you know what let's make this a get request for this url and let's make it a synchronous then of course we are sending off that request so if i save this go inside the browser refresh we grab the response user right there it's all working perfectly fine so now that is your simple vanilla js ajax example so let's now look at the ajax example sorry the jquery ajax example so let's comment this one in now so using jquery as we can see we've got quite a quite a quite a simplified you know example so first off jquery assumes you're using a gets request by default then of course it's going to the url of the user.json then it's got this success callback function so what you noticed with the vanilla js and this jquery example is that these use a callback function so basically got this function right here and it runs whenever the response comes back so we're going to be seeing how this is different to you know fetch very shortly but now as we can see we've got the user inside here the reason is is because jquery sees the server side has told the browser what the what the content type is in this case right here the server is telling jquery it's a json file so json sees this and automatically converts it from json into a javascript object for us and that is why we don't see the json parse right here anyway we then console log the user if i save this go inside the browser refresh we can see we've got the once again the user right inside here all working perfectly fine so if i go inside the network tab right inside here we can see on the actual response here we have the response header of content type being json and that right there is what json sorry that's what jquery sees in order to automatically convert our data from json into a javascript object but anyway let's move on to our fetch example right now so back inside here let's comment this out and bring in our fetch file so for this one we're going to be writing it from scratch so we're going to say fetch right here going to call the fetch function so now we're going to pass through the url we're going to say data forward slash user.json then we're going to say dot then so this first line right here it's simply saying let's make a request to that json file then we're going to run this function inside these parentheses this function is going to give us the response object right there so basically this response object contains information about of course the response so if i console.log the response object right here i save this go back inside the browser we can see refresh we grab the whole response object right here and basically this contains similar information to the network tab inside the response section right down here so of course you can say response.headers.get you know content type whatever it might be you can of course check the okay status redirected status etc so you can do all of these things before moving on okay so that is your that is your response object now back inside here we can see how the promises are working we're saying do this right then do this it's actually that straightforward do this then do this okay now if we return from this function right here whatever the return is from this function that is what the next then is going to grab onto for example response.json let's take the response text and convert it into a javascript object by parsing it as being json return response json then we're going to say dot then once again now we've got the user like i mentioned right like i mentioned the return result from this one is going to be put into this parent this this parameter right inside here so now if i console.log the user and i save this go back inside the browser we have the exact same result the user object right here so that is why fetch is probably going to be a lot easier to read because the code is quite straightforward do this then do this then do this etc now of course this right here this function can be simplified to simply just being response then using an arrow function right here and it does the exact same thing so why is this even more useful well if i return from this function i can say return user.displayname.2 uppercase okay then i can say then once again right and i can grab the display name right here i can just call this display name as uppercase for example right just like this then i can say console.log display name as uppercase so we can see here if i save this go back inside the browser refresh we grab the display name right there as uppercase so of course it's actually it's quite a simple example not too much going on quite useless but we can see how you can use it to of course chain on your things to do do this then do this then do this etc it's easier to read compared to constantly calling callback functions in your ajax examples okay also if i say dot catch right here we can grab onto an error if it was to occur so i can say right here handle my error so for example if the json up here you know failed to pass okay or maybe the file uh maybe the server returned to 500 response code you know something's gone wrong whatever it might be right inside here you can grab the error and of course handle it so fetch is obviously a lot simpler to read from up to down do this do this do this etc now where it becomes interesting and definitely a lot more a lot more impressive is when you combine it with a sink await so let's convert this example right here into a sink await so let's go up here we're going to be defining a new a synchronous function right up here called uh show user in console okay now the async you know function right here just means that we're able to use a weight so basically because as we know uh the fetch api is going to be doing things asynchronously just like ajax so basically we're just saying we're going to be able to wait for the response to come back before we continue with the code so we're going to see it right now quite quite simply so we're going to say const response is equal to then we're going to say await okay we're going to say fetch then once again to data user dot json so this right here might look a little bit scary if you're not used to it but trust me it's not that uh it's not that complex okay so see here all we're saying is let's let's wait so staying here let's wait for the response to come back before running the code down here basically we're gonna fetch we're gonna get the get the request get the data back right get the get the response back we're gonna wait for it to happen then we can run the code down here okay then we're gonna say const user equal to await json just like before right with the dot then whenever you use dot then from before it's basically the same thing as just saying await in this example right here so dot then await similar sort of thing right so now we're saying awaits convert it into json once that's done we can now console.log the user now i've got a whole video dedicated to this right here it goes in more detail so if you want to see that i'll leave it linked below and in the top right of this video okay so now if i call this show user in console just like this save this go inside the browser refresh we can see we have right here the object so this example right here is a lot simpler compared to our ajax a lot cleaner easier to work with and there you go so that is the fetch api for people like me who are used to using ajax uh thanks for watching today's video guys subscribe if you liked it and i'll see you in the next one

Channel: dcode

Views: 19,434

Keywords: fetch api tutorial, fetch api javascript, fetch http requests, ajax fetch example, ajax fetch tutorial, jquery ajax fetch, fetch promises tutorial, javascript promises tutorial, javascript promises, async await javascript, async await fetch, async await ajax, fetch api, get request javascript, post request javascript, send json javascript, get json javascript, post data javascript

Id: ZTQcJWixB1k

Length: 11min 25sec (685 seconds)

Published: Wed Mar 17 2021