Learn Fetch API In 6 Minutes

hello everyone today's video is going to be a quick video where I show you how to use the fetch API built into the browser in order to make asynchronous requests to different network resources by using get post put whatever it is that you want to use so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting to you make sure you subscribe to the channel for more videos just like this one and to get started I have just a simple JavaScript page open on the right hand side which is open the console on the right hand side so everything that we put inside of this left side as you can see is going to be acted upon in the right-hand side so whatever we do over here we can see the result of over on the right and to get started as I mentioned we're going to be using the fetch API we're just going to be hitting this fake API which is going to give us back some fake data so this is going to for example give us all the users inside of this API or we can just get a single user for example and the way the fetch API works is you pass it a URL as the first property and then it has a second property which is optional and this is all of the different options that you want to pass to it such as if you want to do a post request instead of a get request you're going to need to use these options but to get started we're not gonna use any options with fetch and we're just going to log this out to see exactly what we're getting returned so we'll say console dot log of fetch and if we save that you see that we're getting a promise on the side here so we know that fetch is promise based which means that we can use async await or we can use a dot venn and dot catch with it and if you're not familiar with promises or async await I have links in the description and in the cards that you can check out those videos that I've made on both of those topics so to get started what we need to do is we need to say dot then and fetch is going to return to us a response so we have a response object and we're just gonna log out that response object to see exactly what this looks like and if we save that you see we get a response that says that the status was 200 so status text is empty okay is true so we know that this was successful and it has a body which is going to be all of our data but this body of data is actually not accessible directly from the response object we need to call a method on it to convert this response to JSON since we're actually using JSON data so what we need to do is say res dot JSON and this is going to return another promise so then we need to use ven again and this is going to be our actual data we can say console dot log of that data so as you can see we have all the different data on the right head side here it has page numbers as well as all the different users that we're getting from the API and that's working great everything's looking good but what happens if we want to get a single user and for example we're going to get user 23 which does not exist so we're gonna get a 404 status back and when we save this you're gonna see that our get request actually happened but we still ran our successful dot venn code even though we had a 404 being returned you would think that sense of 404 is an error that it would end up in a catch statement like this where we have an error and then we would just want to log some text that says error for example you can see we're not getting any error text and that's because the way fetch works even though we're getting a 404 response which is a failure of a response fetch always succeeds no matter what unless there's some form of network error where the actual browser has a hard time connecting to the Internet the only time you're going to get a failure is if you have the failure with fetch itself and not with the API you are calling so what you need to do is inside of your response you want to check to make sure the response is okay so inside of here what we can do is we can say if rezzed okay then we know we had a successful response we're just gonna for example console.log success else if it's not successful we're just gonna say something else we're just gonna say not successful there we go and now if we save that you can see we get not successful because this was a 404 response but if we go back to our other example which worked you can see we now we're getting this success response being returned because it is an OK response essentially it's in the 200 level status codes between 200 and 299 now that's good null but with fetch many times you want to do more than just get day from the server you actually want to post data to a server update data delete data and in order to do that you're going to need to use the options section of the fetch method and the first thing we need to do is pass in a method this can be either get post put delete it's just one of the HTTP methods so in our case we're gonna use post we're going to create a new user at this API by just doing a post request and then what we need to do is we need to actually pass the data for that user and that's going to go inside of the body and we're going to pass that add some JSON so let's just come in here and give the user a name and we can just say user 1 is the name and we can tidy up this code here we can return just res JSON make sure we return that and there we go now if we save this you're gonna immediately notice it's not going to work we got our data back and it looks like it works but as you can see if there's no name for our user it didn't actually save our user properly because this body didn't get sent up correctly the way that fetch works is you actually need to send it JSON so you need to do json stringify and actually stringify the object that you're passing it just like this now if we say that you're again still gonna notice the name is not here so it's still not working and that's because you also need to set the headers essentially you need to tell fetch that you're going to be passing JSON so we're gonna pass it an object and inside this object we can set the content type and we want to set that to application slash JSON and now if we save it you can see we're correctly getting a user with that name so we're actually creating a real user with the name from our body and the main thing you need to remember when doing anything with JSON data that you're posting to the server is you need to make sure you set the header to the correct content type of application JSON and you also need to stringify the body so you can't just send a JavaScript object you have to convert it to a JSON string and that's something that trips up a lot of people when they're first messing with fetch and that's really all there is to the fetch API if you enjoyed this video make sure to check out my other videos linked over here and subscribe to my channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 464,331

Keywords: webdevsimplified, javascript fetch, javascript fetch api, javascript fetch tutorial, fetch tutorial js, js fetch, js fetch api, js fetch example, js fetch post, js fetch json, javascript fetch json, javascript fetch post, js fetch request, js fetch explained, javascript fetch explained, fetch tutorial, fetch explained, fetch api, fetch api json, fetch api guide, learn fetch js, fetch for beginners js, javascript fetch for beginners, javascript promises, js promises, fetch

Id: cuEtnrL9-H0

Length: 6min 35sec (395 seconds)

Published: Tue Oct 15 2019