Fetch API in 4 Minutes (GET, POST, PUT, DELETE | JSON)

in this quick tutorial we will use the fetch api to get data from a remote server and we'll also look at post put and delete so i opened up this project in the browser and i'm using the console here so everything i put here will be output here okay so let's say we want to get some data we can write fetch and the only thing we have to give as an argument here is the address or url now we're going to use a service called recrest.in which will give us some fake data so this is their domain and then usually with external apis there is the word api in the url to indicate that we can hook into this and after that there's usually the resource that you're interested in so in this example we're interested in the user's resource and this is actually all we need to make a so-called get request so let's log this and see what we get now what we get is a so-called promise and it's not important that you understand promises right now but you can tack on dot then on a promise and usually people format it like this now these days we can also use async await so you can write a weight in front of a promise this is a very popular syntax so i recommend that you open the async await video in a new tab and watch it after this one here we'll keep using that then so eventually the server will send a response and we can access the response in here we could call that response or just res let's log this to see what we get okay so we see a couple of things the http status code is 200 and there's also an ok property so if the status code is somewhere in the 200 range the ok property will be true otherwise it will be false we also see body something with stream and this will actually be the data that we want but you can imagine there could be a lot of data so we actually don't get all of the data immediately we have to wait some additional time before all the data has been streamed in also the data will be in json format this is the format computers use on the internet to communicate with each other and we cannot work with json in our javascript so we need to convert the json to normal javascript so we're going to use rest.json here this method will wait until the complete data has been downloaded and then converted from json format to javascript format now it gives us a promise because it can take some additional time before we have all the data and we want to return that promise we can also write this on one line since it's an arrow function and then we can even remove the return keyword since there will be an implicit return here on one line so we're still returning a promise and so we can tack on another dot then which we can also format like this so then in here we finally get the full data that has been parsed as json so now it's a normal javascript object usually people call this data let's log it so now we can see the complete data but usually you know we're not interested in everything here we only want the actual users and they actually also call it data so let's output one of the user's name in the console right let's take user at index 2 and then we get the first name okay so now we can get data and do whatever we want with it in here and you can also see this in the network tab by the way it shows all network requests here is our fetch call you can see we have headers basically metadata and it shows the response with the data as well and this is json format it looks like a normal javascript object but it's slightly different alright now very quickly about error handling two things can go wrong there could be a network problem so while making the request your internet falls out let's say in that case the request response cycle cannot be completed and this promise that we get from fetch here will be rejected as it's called and we immediately go in the catch block right so here we get an error object and we can do something we'll keep it simple second thing that can go wrong is for example if we try to access a resource on this server that does not exist so then the server will respond with a 404 error now in that case the request response cycle is still completed it's just that the server is letting us know the resource doesn't exist so to deal with that people usually run it like this so if the ok property is not true so if the status code is not in the 200 range for example it's 404 or 500 then we simply want to log something for now and we want to return here to stop the function and only if the ok property is true do we want to continue here right so if it's false it will return and the function stops if the ok property is true we get to here and so this is also called a guard clause all right so this is a get request if we want to submit data we can do a post request so let's say we have a new user object and to submit this with fetch is going to be the same except for one thing we should add an additional argument here which is going to be an object but the following property so method should be post the default is get and then we also need to let the server know what the data format will be and we do that with headers and we only have to specify one header here which is going to be content type now we can't write property names with a hyphen like this so people typically wrap this in quotation marks and then that works and it's going to be in json format which is in the application category right and then the actual data that we want to submit with body now remember we should send data in json format because that's the format that computers use to communicate with each other right right now our data is a normal javascript object so we should convert this to json format with json.stringify okay so then for put and delete it's almost the same you can pause the video if you want to study them and also check out my javascript course thanks for watching hope it was helpful so i recommend that you continue with the async await video

Channel: ByteGrad

Views: 21,112

Keywords: fetch, fetchapi, fetch(), javascript fetch, js fetch, fetch api, js fetch api, fetch() api, fetch get, fetch post, fetch put, fetch delete, fetch .then, fetch promise, fetch then, ajax fetch, ajax fetch javascript, fetch for beginners, ajax javascript, xmlhttprequest, xhr, fetch method, fetch api tutorial, fetch json from url, fetch json from api, fetch api crud, fetch crud, fetch api json, javascript fetch api explained, ajax call fetch api javascript, http post

Id: XHokFQeQ6Lk

Length: 4min 59sec (299 seconds)

Published: Tue Jul 05 2022