Ten Steps to Mastering the Fetch API

okay so today we're going to be talking about the 10 steps to mastering the fetch API so I am going to be covering a huge range of Technology associated with the fetch API we're going to start off talking about basic fetch calls the idea of promises the then catch chain then looking at how using async await with a try catch lets you achieve the same thing with slightly different code moving into URL objects request objects and header objects then talking about response objects all the different parts of the response the different ways that we can create them and use them talking about General HTTP and the methods that we will be using with our fetch calls moving into the stuff that comes back in the response when we get a response object back from the server what is the different types of things that we can get and how do we access the content inside that response object we're going to talk about how to put HTML content onto the page based on the contents of a response whether it's text HTML Json or images how we can put that into web pages we're going to talk about API keys we're going to talk about authorization um query strings different ways that you can use API keys and a lot a lot more information about headers we're going to talk about security policies and how to protect your users on the web pages that you build we'll talk about how to upload data how to bundle just data from a form data that you generate within your Json or within your JavaScript and also how to upload files one or more files we're going to talk about course now this is something that a lot of people struggle with so cross origin resource sharing how does this work when you try to make requests for data that are coming from different URLs than the origin that you're on how does that work so we'll talk about that we'll talk about dealing with multiple fetch calls either in sequence or happening at the same time we'll talk about how to abort a fetch call so if you start a fetch call and it's still running but the user wants to navigate away from your page or they want to do something different how do you stop that fetch call so we'll look at doing that and then as a bonus after the 10th step we'll talk about how you can actually measure the download progress of anything that you are fetching all right so what I have here set up this set of files right here if you look in the description you'll find a link to the GitHub repo that has all this information all these files are going to be there including a small little web server that I set up uh this one's just for one of the items in this list we're not going to be using it for every one of them but we have it there just for being able to upload data to have an endpoint where we can upload files so I have broken this up into a whole bunch of little files and what we're going to do is just import this method from each of these files and call the one method so we will just comment and uncomment these files one at a time to look at those okay step number one basic fetch so jumping into here in our basic fetch file we want to look at what is the simplest way that we can do a fetch call with the default values for absolutely everything and anything so Inside My Method I want to fetch this endpoint now if I were to take this and just jump into the browser right here we take a look at that here we go this is the result I'm going to fetch this Json file now it's an array that's filled with a whole bunch of objects that's what Json is it's arrays and objects strings numbers booleans all that fun stuff so I want to get this data but I don't want to replace my current web page with that data that's the purpose of fetch we want to be able to tell JavaScript to tell the browser hey I would like a copy of this file so that I can use it and then generate some data I want to take all the names out of all these objects and build a list on the page or something else so we want to get some data and we want to use it as part of our web page without having to refresh the entire web page that's the idea behind fetch so what is the simplest way that we can do this well we have this command called Fetch so every browser supports this every browser since about 2016 has supported this command Fetch and we can pass to it a string that is a URL so this is the one that I want to get and there's a whole bunch of options that we can set but like I said we're going to use the most simple method with all the default values so this is all that we have to pass in this string we pass to the method I can save it I can run it that has actually run if I go into my network tab here we can see in the network tab that sure enough a fetch was done to this user's endpoint this URL and here is the data that came back so we got that data coming back to the browser we're still on the same page but we did actually fetch the data now if I want to use that data on my page what I need to do is I need to add more to this so we're going to put a couple of methods called then chained onto the end here now I can write them all in the same line but it's much easier to read if you write them like this stacked one on top of the other the fetch method returns something called a promise basically it's a wrapper around the response that's coming back in the browser when we pasted this URL in we got a response that came back from this web server it sends us back a response object inside that response object was the Json file that we're looking at right here so over here I want to do the same sort of thing I'm going to say hey go get me the response object from that URL when you get it back this then method will sit there and wait until the response has come back so I can put a function inside of here so we can write it like this just a standard function or you can write an arrow function like this so inside of here what's going to be passed into this function I could also use a named function if I had a function here called Fred then somewhere else on my page here's that function Fred the then method will take whatever was inside the promise that this thing returned which is our response object and it'll pass it to this function so we will have a response object you don't have to use the full word response this is a variable I could do resp or res something like that rep but this is the response object that is coming back from here now Fred okay I'm gonna skip over that I'm gonna make this a little bit simpler with an arrow function but I still get this response object there we go so here is my function instead of having a named function over here I've just got an anonymous Arrow function this is the response that came back from the server if I do console.log I can take a look at this response object there it is here is the response this is the URL this is where we sent the request to and what was the status status was 200 everything was good we got back what we were expecting to see fantastic so I have my response usually you'll want to check and see if the thing that came back actually did work and that is actually the purpose of having this catch at the end here if something went wrong so when we do the first fetch if we're unable to connect to the network this command will fail and down here we will get an error object so again we have an function inside of here my error object will be coming from here or it could be coming from this then or it could be coming from this then if there's a failure anywhere in any of these the error will be passed down to this catch method so inside of here we can console.warn let's say the message we can take a look at that if something failed now inside of here we always want to do error handling you always want to check for problems at every step so if my fetch got a result but the result was say a 404 error maybe I mistyped the name of this so that's going to fetch but it's going to return to 404 error so we can check that we can say okay what is the status there's a status property there it is 404 we got a 404 error and right here this is the error message that's happening down here so this thing failed to get the browser is telling us that this fetch failed and it's writing out an error message this isn't the console.warn sorry this is the browser writing out an error message to say that the fetch failed but in hours we know what the status is 404 it didn't exist there is no page called this I want to check and make sure that the status is somewhere in the 200s with HTTP status codes the 100s are all an intermediate status the 200s are all hey everything worked out three hundreds things are probably good but there was some sort of redirect or something like that that happened so you asked for this resource but I gave you this one instead I still gave you something but there was something that had to be changed about it the four hundreds there was something wrong with the request I couldn't complete the request because you didn't have permission you didn't give me the API key there was something wrong with the request 404 the page isn't there so request was sent response came back but there was something wrong and then anything in the 500s that is server-side error so the programming on the server side failed for whatever reason now I want to know if everything is in the 200 to 299 range and that's what we're going to do here we're going to say if response or my resp variable here dot ok if it's okay it means that it was in the 200 to 299 range if it's not so I'll do this if not okay I will throw new error and we can write some sort of message so that it comes up and this one we will see here we change this so we will get a 404 error this will catch it throw an error the error will come down into this catch and this function right here will run because we're generating an error there we go was not a valid response now if I change this back to the proper users there we go I don't see the error message happening so instead what I want to do is I want to take the response that came back and I know it's a Json file so I want to extract from the response the Json data I want to take the string that's inside the file which I know is a Json string and I want to turn it into a JavaScript object so we will return resp dot Json and this is a method to extract Json string and convert it to a object an object all right returning from a VIN will take us to the next then this is going to return us return a promise and the promise will sit here in front of the then until it has resolved when the promise is ready so basically what we're saying is whenever this method is finished extracting the Json string converting it into an object when all that's done this function will be called so we're doing Fetch and then we're going to call this function and then we're going to call this function and the cool thing about that is it's always going to wait and so our data object right here if I console.log the data object we can see the contents there it is it's an array with 10 objects just like we saw here it's an array that has inside of it 10 objects there we go same thing that we have right here and now this is a JavaScript object like any JavaScript variable and if I want to build HTML content with it I can which we're going to get into in a future step all right so we have this now why do we use the then one last thing in this first step why do we use the then and it's because I can't do this I can't say hey I want to go get that data and I'm going to put the result here's my response object I'm going to put it inside of here and then what I want to do is I want to get that data let data object equal response dot Json and console.log data object this is going to fail this will not work and it won't work because we're not waiting right here we're saying go do this thing now JavaScript is going to be happy enough to send that request off it'll say okay I'll go and I'll get that stuff for you and it looks at first glance like what it's going to do is it's going to say all right we'll put the response object into here but this is going to be a promise object because this thing returns a promise object it doesn't return the response it returns a promise object that sits here waiting until whatever it is is done when it's complete then this is the contents of that promise here we're returning Json string turned into a JavaScript object wrapped in a promise that sits here until we have the actual data then it gets passed into here here we're not waiting so this is going to fail here we go uncaught type error response.json is not a function so we can't call response because this thing is a promise object promise objects don't have a method called response or beca called Json so this will fail every time all right so that's the end of step one that's your basic fetch that's understanding promises that's understanding the sequence how we can chain these things together with the thens how you always should have a catch at the very end of it because we always want to do error handling we always want to check and make sure that things worked at every step along the way okay moving on to number two so the alternate syntax moving into here try an async so this is the different syntax than the promise where we had we were doing fetch then dot then dot catch and we were doing that because this returns a promise and then we were returning a promise from here and this was the last step in our sequence and this was here to catch an error at any step along the way now if you want you can say that your function is asynchronous meaning if you do anything inside this function that uses a promise you can use the keyword await to pause at that step so what do I mean by that well I can do a fetch for the URL and I'm using the same one as before and that thing that I was saying never to do we can say hey here's my response object and then from my response object I'm going to get my data object and we're going to say we've got a response and from the response I'm going to extract the Json and you can see it automatically did this for me this is what we want to do in front of the fetch in front of the response dot Json anywhere that we are going to call a method which returns a promise which is something that needs to wait for a little while before getting a response we do this because it's asynchronous we're allowed to do this we can say all right color fetch but don't assign the result to this variable until after it comes back again here don't do anything until we've got the response back so we can console.logresponse here and we will have an actual response object and then down here console.log data object we will actually have the data object coming back there it is there's my response and there it is see this is in my second file so I'm getting the same results doing the same thing so a lot of people will look at this and go okay this is much simpler shorter it's only two lines of code I don't have to write all the thens inside of here my personal preference is to use the then chain I like how it encapsulates all this functionality but I know that that is not everybody's preference some people do prefer this syntax the downside of this syntax is we can't just leave it like this because we have zero error handling here if we want to do error handling we still have to add that in here we have to wrap all this code inside of a try block with a catch and here's the error at the end like this so now I can do console.warn here's my error message so if I tab this all in this will handle failing the fetch but the response I still need to check and make sure the response is okay so I still have to do this I still have to say if not response.okay throw new error and that comes down here so let's test this it should be working just fine yes there we go we've got everything working but with the try catch now we have some error handling so let's try it out with an invalid URL now I get the 404 error which means that this should trigger an error which should go down to the catch and there we are here's the response that's this one on line 11 and then the error comes down and line 16 that is our console.warn right here so this part's not running we're navigating to this part of our code because we are throwing an error and that jumps down to the catch same sort of approach just a different way of writing the code so we've got try catch instead of the fetch then then catch two different ways of doing it both work it's just whichever syntax feels more comfortable to you whichever one you feel is more readable they are both valid syntaxes all right so that is the end of number two moving on to number three understanding more of the parts that come with fetch so what do we mean by Parts well there's other objects and in that first simple version of the fetch call that we were making we were using all the default values so now we're going to start looking at some of those other options the other parts of the things that we're passing into effects the things that fetch is doing by default so a URL when you call fetch like this what we put inside of here could be a string which is what we were doing before something like this this is a URL string we can put a URL object so that's what we're going to build first of all so that's one of the things that we're going to look at here a URL object you can pass a string like this into the URL Constructor and it's going to give you a URL object so what's the benefit of that well if you had this string and you were using this string nothing wrong with it it's going to work fine with fetch but if you needed to get at any of the bits and pieces so what if I only want the path the folder and file name what if I only wanted the port number what if I own one to the protocol what if I wanted the domain what if I wanted the origin what if I wanted just the query string so there's all these other parts so the hash value there's all these different pieces that make up a URL yes I can use string Methods to say okay split it wherever there's a forward slash find a question mark find the hashtag you know there's all these things that we can use to extract bits and pieces but it's a lot more code than hey if I just add the property name that's going to work just fine so inside of here what I'm going to do is I'm going to say here's my URL create a new URL object and there's two ways we can write it we can just pass this string in which is the way that I typically do it but you can also split it into two pieces there could be a string which you can think of as being this part of the URL or the base which is this part so if you split it up you can have the base and this has two separate strings or just pass in the whole thing which is what I'm going to do right here there we go I have created a URL object console.log URL dot host URL dot origin URL dot protocol dot port half name and so on there's all these properties that I have up here these are all bits and pieces of what we have inside that URL all right oh we have to go back to our main page and we have to switch this over to number three we're no longer on number two and there we are so there it is there's the origin here's the protocol here's the port this is the path name which is the folder and file name this is the host so we've got all these different bits and pieces that we get for free just by wrapping the string inside of a URL object the fetch it's happy to take a string it's able to take a URL object it's also here we can just quickly throw on a then just to show that it works so my response object I'll just write up the status so give us a 200 there it is there's the 200 status coming up so string URL to the different things that we can pass into a fetch the third one is a request object there's actually a request object that we can build so I can say cons or const request equals new request so a request object you can see here we can pass in a URL object right here and then there's an init property so there's an object where we can put a whole bunch of settings inside of so let's do that I'm going to pass in my URL just like fetch the request is going to be able to accept a string or a URL object then there's options so inside of here in the request what are things that you might want to put in there well headers there is a headers object a header's setting where I can set up various headers now I'm just going to throw one in here as a sample we'll come back and talk more about headers later on but we can put X slash Steve and the value is going to be hello there we go so I've created a header and I've put it inside of there there's different ways of creating it this is the most basic with no error handling whatsoever but I'm just going to throw it in there just to show that we can do that the method the default method that we use for every fetch call unless we specify otherwise inside the request is get now I will come back and talk more about these methods but get you can think of basically as read I want to read some data from the server I want to go and get a file I want to get an image get a Json file that's what git is I'm not sending any data to the server necessarily I just want to get something back so that's what this means and then once the stuff comes back what do I want to do with it well there is a property called Cash and you can set it to one of these values right here so the default if I set it as that so this is if I'm not putting anything in there means this cash first so I'm going to go and check in the browser's HTTP cache so every time you visit a web page the browser is saving those files that it brings and downloads so the HTML the CSS the JavaScript the images all those things are being saved in your browser that's the history of your browser it's saving all of these things it's caching them in an HTTP cache so this is all HTTP cache not to be confused with the cash API which is another topic which there's a video that I've done on that if you look up at the top there you'll find that so not the cache API but an HTTP cache in the browser so save it to the cache or look in the cache first to see if it's there if it's there but it's too old it's expired it's gone be asked gone beyond its best before date then we're going to send a request off to the server and if the server says it has a newer copy we will download it and we will update the cache we'll replace what's in the cache reload means always go to the cache don't bother checking the cash first just go to the server get the new one bring it back and put the new one in the Cache no store means always go to the server but don't bother updating my cash just get a new copy of the server don't save it no cash means make a request to the server and say Here's the current age of what I've got do you have a newer version and if it does it will send back the new one and we will update the cache and use the latest version that came back from the server Force cache if there's nothing in the cache make the request and then save it only if cash means don't bother ever sending a request to the server just go and look in the cache if it's there use it if not this is the error that we will get so right here we can say cash this is a setting for the request this is in the options object for the request and I'm going to set this to let's say no store so I'm not going to bother saving it in my cache so here I can put the string the Str from up here I can put the URL I can put my request object any of those are going to work to bring back our response there it is there's our 200 response so we should always however then for the data handling and our catch with the error so we will say pass it to console.warn so that's going to be the error message inside of here we will check to make sure it worked so if not response dot ok throw new error and then we want to have the data so we will extract the data from there by returning the call to response dot Json and I'm calling response.json because this is going to be a Json file it's my local Json file that I created so this is coming back and the data is going to be here and I can console.log the data so this is the JavaScript object created from the Json string that was inside the response object and there it is there is our Json data the JavaScript object so it is a object all right so that is number three working with these URL objects working with the request objects the headers object so we will come back and talk more about the headers object but just be aware that this is like settings for the request that are going to be there's some settings that happen in the browser some that happen on the server and we're going to talk more about those coming up moving on to number four understanding the response so we got a response object sure but there's a lot more to it than just this method so let's take a look at that so in my response I've got a little bit here set up already I have a bunch of examples so these are strings pointing to different files one's a Json file one's an image one's a font file one's an HTML file so we have all these different files we can make requests for any of those using fetch when we do the fetch we know we get back a response object We call we look at the OK property to see that it worked but it is also possible for us to build our own response objects so let's look at what a response object actually is I have an object here so JavaScript object plain ordinary JavaScript object I'm going to turn that into a Json string right here so I'm calling json.stringify I'm turning this into a string so we can do this in two steps so let's say my Json string is this there we go and then that string I'm putting it inside of an array and I pass it to a file Constructor so I'm building a brand new file this is what I'm going to call it and this is the mime type the data type of the file then I can build a new response object so I don't even have to go and make a fetch call to create a response object now that's the whole purpose of what we're learning here today is about fetch calls and we will look at some different ones here in a minute but this is what a respect a response object is it's a container that has a file inside of it this is the body of the response so every HTTP request and response it's basically an object so we've got this HTTP request object there's an HTTP response object that comes back from the server both of them are constructed the same way there's a head and a body both of them have these two parts to them there's also a footer as well but we never touch the footer we don't have to worry about it we can forget that it even exists and it won't affect anything that we do so let's just think of it as these two parts inside the head this is where all the settings are this is where we have those things like the cache setting and the headers the actual headers saying hey I'm using the get method here's the URL that I'm going to this is the port number that I'm using here's the status code of the response all these things are inside the head the body is the actual file that's what we have down here this file that we created that we pass into here that is the body it is possible that the response is null there is nothing inside of there when we make a get request to the server this is null it is empty when you make a get request you're not allowed to put anything inside the body the response will hopefully have something in the body now it's possible that it's empty it's no but most of the time you will have something inside that body so here is my body this is in my response object and then three settings three properties inside the options object for the response a status code to say hey it's good or it's bad status text it can be whatever you want typically if it's 200 that means okay so you'd write something like that and then headers we had some headers before we had written out that object with the string inside of it here's a couple of actual headers if you're building custom headers like this we can come up with our own names but they have to start with the letter x foreign so there's the value here's the name if it starts with an X you can create whatever headers you want but there are headers that you're allowed to use and there's other ones that you're not allowed to touch you're not allowed to change it's only the browser that is allowed to set them here we have content type and content length so in my response object I've got this file this is the kind of file that it is and this is the size in bytes of that file so we can console.log this response object that we got back and there it is so here line 20 this is the object right here this object here's the string version of it which is the contents of our file and then our response that we built we're taking a look at the response object there it is status 200 status text say my name and we can look to see what those headers are if we want so in our response we can say hey I want to look at the headers inside of there can you get me the header called content type can you get me the header called content length I want to take a look at those headers inside this response object there it is so anytime that you need to read the headers from a response object assuming you're accessing ones that you're allowed to access you're not allowed to access all of them remember that but assuming that they are there and you're allowed to access them this is how you do it response.headers.get and then the name of the header so dealing with fetch calls and these response objects we can do fetch calls for these let me just comment that one out so we'll just very quickly test a couple of these to take a look at them so I'm going to look for the image string and again I can use the string I can create a URL object I can create a request object then we get our response coming back we will check if response dot OK is not true throw new error and we will return from this first then the response dot now this is not Json this is an image so instead of doing response Dot Json we're going to do response dot blob blob stands for binary large object basically it means that this is a binary file it's not a text file this is an image it's a video it's a media media file of some sort it's a font so it's not text and inside of our next then we get a blob coming back and we'll have our catch at the very end and this is another way that you can write it I'm just going to write out my error object so if there's an error object passed into here it will be passed to this named function so warn is a function or a method inside the console object so I am passing the error object to that function so instead of writing out error.message it'll write out the whole error but that's okay we have here the blob and if I try to console log that there we go this is what I get Blob it tells me the size it tells me the type that's about all that it can tell me it can't show me the binary data but it can say okay it's a blob object now if I ever wanted to do something with that like put this in my page I could do that I can turn this which is basically a chunk of memory so they have now this blob that's stored in memory somewhere so we've got this chunk of data that's saved in memory I want to use it I want to put it here in my HTML I've got right here this image tag called pick I want to put it inside of there I'm going to replace this image with this one that I got back so to do that I have to create a URL basically I have to find a way of pointing to that place in memory where this thing is saved so I will create a URL using that URL object that we've talked about before but it has a method called create object URL we just have to pass it our blob I'm going to say here I've got a bunch of memory can you create a URL that points to that spot in memory for me then my image I will get a reference to that get element by ID pick and we will set the source of that equal to this new URL that we just created there it is now this image is a different aspect ratio than the one that we had here but this is it we have replaced that original here if I comment this one line out there's the original image run that again there it is replaced with the one that we fetched from the server so we went off to pick some dot photos got an image brought it back and here let's change these to match so we'll say 300 and 200 now it'll have the same aspect ratio there we go there's our cute little puppy image other ones work the same way so for a font we're going to get back the reference to the file it's going to be saved in memory but then I can write some CSS I can create a style tag and write some CSS that will point to the create object URL this URL that we create I would use that as the value for my source inside of an at font face Style for HTML when that comes back instead of using blob we could do response dot text that's for text files response dot Json we've already talked about that's for Json files this one is for text HTML and XML files and CSS and JavaScript anything that's text based blob is for images video audio fonts things like that all right so let's switch over to number five here and for number five what I have is starting code does the same thing with the image so we are going to pick some that's our fetch call we're going to call the blob method on the response object which will give us this blob that we can use with the URL create object URL method so it gives us a URL that points at that location in memory and let's just console log that just so we can see it again here and yep there we are here it is so this is the URL that we're looking at that is being used for this image so it's not the URL that was on the pixum website it's the data that came back that was saved in memory by our fetchcom that was turned into a URL on our vocal site where it can be used for this image all right now we've got two other kinds of data here we've got some Json data and some text Data as well so this is pointing to our server right here the server that I've got this is a simple get request we'll do this one first what I'm going to do is inside my header I'm going to add an H2 with the text that's coming from here so we've got fetch of text string we'll get our response object in the response object we always want to check to make sure that what came back was valid if not we're going to throw an error now this is plain text so instead of the Json method instead of The Blob method we're going to call text this is another method that the response object has actually all three of these text blob and Json all belong to the body object but the response object has access to that method so there we are recall then this will give us the text from that here's our catch if there's a problem we're right at there and in my header I'm going to say the inner HTML is going to be equal to itself Plus there we go we're adding an H2 element and inside of that we're going to put this text so I used a backtick characters and this is my preferred approach to writing new HTML Based on data if you use the backtick characters around your HTML string you can embed variables like this so This is called interpolation where you're sticking in variables inside of that so we are now getting an H2 element as well as an image being set by calling the text method we get the text to write inside of here by calling the blob method we get the raw binary data that we can then turn into a URL and use inside of our image element and the other one is the Json data now this is the most common of all the methods this is the one that you're going to be using the majority of the time I would imagine we've got our response object so a lot of the same stuff is done regardless of the kind of file that you're looking at if everything works out we always want to be doing our error handling so if everything does not work out properly we're going to throw an error so we'll have another then and we'll have our catch console.warn there we go and at the end of this this is going to be Json file that comes back a response object is going to contain the Json file that comes from the server from that Json file we want to extract the data so we're going to take the string we're going to pull the string out of the file and then turn it from a Json string into a JavaScript object and that's what the Json method does for us so we're going to call this response.json method which is going to return a promise the promise will then sit here in front of this then method so the result of this then will be the promise that sits here when it resolves so when we actually get the JavaScript object then this then method we'll call our function inside of here and we will have our data object or let's call it a data array because that's what it is that's what we're getting back here from this endpoint and if I were to open that up in the browser right here this is what we're getting back this is the URL it is an array that has 10 objects inside of it every one of them with the same properties now I'm not going to use all these properties I'm not going to write all this data out to the page but I will take a few of these properties so just to demonstrate we're going to take first name and last name those two properties and we're going to take this the user ID so those three things we're going to build some HTML using that now if I jump back in here to my HTML file here is my list here's the UL element and inside of here what we want to build is something like this there's going to be a list item and inside of it I'm going to have their first name I'm going to have their last name like this inside of a couple paragraphs and then inside the list item this is where I want to put that uid you know something something like this not exactly this so let's copy this just to demonstrate [Music] it doesn't matter that I'm missing the first letter here when you want to add data into an HTML element maybe I want to be able to later on have somebody have a click listener added to the UL so when somebody clicks one of the list items I can look to the uid value and know which one that was clicked so if I have to then go back and reference that original data I can find a match the problem is we're not allowed to do this we're not allowed to invent our own properties I can't create a property called that and stick it into the HTML I can technically write it yes I just did but it's not valid HTML if you want to add your own custom properties like a user ID you have to do this you have to add the data prefix in front of it so data hyphen and then the name that you want to make up so now we have this attribute called data uid that I can access from my HTML I can create it when I'm generating this HTML and I can access it later with a click listener okay so we have all this this is effectively what I want to create so I'm going to copy that I'm going to comment that out now there are many ways that you can create the content inside there we can call create element create document fragment there's a whole bunch of different things that you can do to actually create the content my preferred approach is this here's my UL this is the list variable so list Dot innerhtml now we did this for the header right here we said just add to it here I'm not adding to it I'm replacing whatever's inside there with new content we're going to take our data array and then we're going to call the map method the array map method allows you to Loop through an array what it does is it returns a brand new array so I'm going to take an array of objects and turn it into an array of strings these strings are each going to be a piece of HTML so there's going to be one piece of HTML for each one of the objects that we're getting from this server so this object will have a piece of HTML that represents it and that's what we had as our demo here this we're going to generate one of these for each one of those objects in this array now I can't take an array and assign it to enter HTML because it's just going to say object array or object object that's pretty useless so I'm going to take this array and I'm going to combine every one of those strings into a single string I'm going to join them all together as one big string that gets assigned here inside of here we've got our item and we're going to return and I'm going to put backtick characters around it the same as I did down here so I can put variables inside of it I want to build this is the HTML that I wanted to build so in here instead of this it's going to be item Dot uid so item was my variable item.uid and right here it's going to be item DOT first underscore name and this one's going to be item dot last underscore name there we have it so that will work that will generate it there we go there's all of our data and if we inspect one of these we can see hey look there's all the unique IDs as well so we have all that data coming out now if I wanted to add a class name that's easy enough to do I can add something like that there we go now I've got some CSS I can tie you into my CSS file very easy to do there's one thing I can do to simplify this a little bit and that is here instead of putting a variable item that I then have to access the properties there's only three properties that I want in the actual data there's lots of properties that I don't care about I only want those three so I'm going to use destructuring instead of putting item I'm going to do this this is the object and the things that I want from the object are the uid the first name and the last name those three properties are all that I care about so I'm destructuring the object to get those three things and that means down here I don't have to put item in front of each one of them this becomes much easier for myself and other developers to read so I can see here's this nice chunk of HTML there's three variables the uid the first name the last name those properties were well named in the data so why not use those same names here and there we have it we've got the data being built and one of the most important things about this approach is that we have one command all this HTML is being added at the same time we're not coming in here and inside the loop saying inner HTML is equal to what it was plus this new value and doing this again and again and again forcing the browser to redraw the page with every single element that we add one after another redraw the page redraw the page redraw the page we don't want to do that we want to minimize the number of times that the browser is forced to rebuild the page because we're changing the content here I'm changing it once I'm building one big string and saying here add this data so one time it changes the Dom and it redraws the screen all right and so now that's the end of number five number six let's move on to authorization and credentials let me come down here and move on to that we are moving on to number six all right so talking about API Keys now what is an API Key Well API stands for application programming interface basically in the context of fetch what we're talking about is a web server somewhere that can provide you with files it can provide you with Json files or HTML files or XML files and this data will be sent to you depending on what URL you use so which endpoint is what the URLs are called so the different URLs are different endpoints and for you to be allowed to access the data many apis most apis will require you to have a key so you have to register with them and they will give you a key it's just a unique identifier that says you are the person who's requesting this data and by doing that they can keep track of how many requests you're making which endpoints you're requesting if you're allowed to access certain endpoints or how many times you're allowed to access those different endpoints so API Keys once you've registered and you have this key it's something that you want to keep Secret most of the time when you're building a website what you'll want to do is you'll want to be making these fetch calls from the web server and by doing it on the web server you can put the API key into an environment variable so it's a variable that's not written inside your code now there are some like uh Google Firebase where they will have multiple keys that you're using and one of them is intended to be used in the browser so it's okay to have it in your code because there's other keys that are on the server and it's the combination of these Keys that's going to work to allow people to have access so it doesn't matter if somebody gets the key that you put in the browser they still don't have your server side key so in this example we're just going to be talking about those instances where in the browser you have this key and you're going to have it in your client-side code so where can we put it so different places that we can put it the keys can go in the query string they can be in the headers those are probably the two most common but also in cookies now cookies I'm listing here is a separate thing but really cookie is a header inside the headers there is one called set cookie or set cookie two and these headers will contain or can contain the API key they can contain lots of little bits of text information identifiers session IDs things like that can be inside these cookies so these are different places that we can put them to send them to the server when we make a fetch call we're going to be placing them in different places so when I make my fetch call I want to use a request object because it's going to let me access all these different things so we can create a URL so here's my string we'll do something like the one from Json placeholder actually let's use the one that I've got up and running here so we've got This Server this is a very very basic simple Express node.js server I've got get post put patch delete these endpoints are set up here now these endpoints are the http methods so get remember was the default get means I'm just getting some data I'm requesting some data post is I'm uploading something I'm creating a new thing on the server put and Patch are both for I'm updating something put is I'm replacing the old thing patch is I'm changing part of the thing that's on the server delete straightforward you're deleting something on the server so I'm just creating these different endpoints so that I can use it to upload files and do things so I'm going to use this as my endpoint and I'm listening on Port 3000 so basically what I'm doing is I'm going to http colon slash 12700 one colon 3 000 this is the end point that I'm using for get and post for these other threes I would have to add something afterwards and whatever this value is would be represented by this variable ID okay um when you take this just make sure that you have it in a separate server in the terminal you would navigate into this folder so you will do this you'll say CD into server once you've got a copy of this whole project and then you want to do npm install which will install Express and cores these two things that are being used and then to start it you just have to say node Main and that will run the server so that's what I have done here and if we open up my terminal you can see I read node Main and it is listening on Port 3000 so this is actually running right now this server it's been running the whole time I've been recording this so this is my endpoint that I'm going to be calling from here foreign so we do this then we can say I'm going to create a URL from that we pass in our string and then in the request object the first thing that we pass in is a URL and then an options object equals new requests there we go so we're creating a URL object and a request object now the other things that we haven't really talked about in here the query string question mark is the start of it and you can think of these as just like variables so there's a name and a value so here's the name of the variable here's the value of the variable and you can create as many of these as you want like that so name name value value you separate them with ampersands this whole thing is the string value inside of here the sorry the search value inside my URL object URL dot search will be that string or there is a URL search params object so we can access that property so let's say SP is my search params object it's going to be URL dot search params so this is an actual search params object we can access the values we can add new values we can say sp.append so this is a much quicker and easier way to work with all these values instead of having to work with them as a string so if we're talking about an API key like we were talking about earlier then with the API key we could add it like this we could say append API key and then the value is whatever that API keystring is so I've added my API key into the query stream so in my server in this get or poster whatever the request is if inside of here in the request object it is looking for something in the query string called API Dash key like this or X API key or whatever it's called if it's looking for something then this is the way we have to add it in now if it's not looking for it in the query string maybe it's looking for it in the headers so we could have here let's say we'll set our method to get and our headers could do this again like we did before just an object literal where we write out all the values or the better way to do this it's a little bit more long-winded but the better way to do it I'm going to create a variable called H which will be my header's object so H is new headers so why do I do this well I'm going to do append like I did here so H dot append and we can set you know content type and so on all those headers if I was uploading a file then I would add content type if I was uploading if I'm doing a post and I'm uploading a Json file I would add this header I'm not doing that I'm just making a a get request to the server but inside the headers if I was to do this the headers object is actually going to do some testing and checking to make sure that we've got some valid headers we're not making up things or trying to change once more importantly trying to change ones that we're not allowed to change like the origin this is a header that is set by the browser we in JavaScript are not allowed to change the origin so we're running right now on this origin HTTP 127001 Port 5500 that is our origin that's where our server is we're not allowed to change it to something else I can't say that oh yeah I'm actually coming from https cia.org I'm not allowed to do that the browser won't let me do that it's going to check these headers and say no no this is not a valid one you're not allowed to use this so that's the most important reason why we do this so we add the headers object in here but we can set up whatever headers we want so maybe there's going to be one for the API key that we call X API key so remember if you're creating headers yourself if you're making up the names the headers have to start with an x just like in the HTML when you're adding your own attributes they have to start with data and Ivan in the headers you've got to start with X and then the name so here's my key right here so this is the key that I'm passing up so maybe you need it in the query string maybe you need it in here in this header one that you make up or there is another one called authorization and this one is like this this is how you would send a Json web token so this is a very common type of authorization that you would get from the server so they create on the server a Json web token it's a base64 encoded string that contains encoded information like your user ID and this string is sent and then on every subsequent request you're supposed to send this to the server so using the built-in header called authorization the word Bearer and your JWT token like this so this is an API key and this one would be your JavaScript web token or sorry not JavaScript Json web token so we have this token with the word Bearer and a space between them goes inside of here so different ways that we can send this information off to the server part of the query string in a custom header or in the authorization header it's possible that the API key they want it sent like this but whatever the reason whatever the method whatever the approach we just add the headers in here like this foreign now depending on what headers you're setting it is important to be aware that there are forbidden header names there are certain headers that you're allowed to set in a request there's certain headers you're allowed to set in a response there's too many to go through and list them all but if you go on to the Mozilla developer Network website and you search for forbidden header names you will find the list of all the different names that you're allowed to use ones that you're not allowed to set through JavaScript ones that you are allowed to set ones that you're allowed to set in requests and ones that you're allowed to send in responses there's not a lot for the responses but this is what we do so we create our request object with the URL that includes the search params we set our method we add the headers and then we can do our Fetch and we do our then and then and catch response we check let's try a set of parentheses there return response now I know my API right here it's just going to be returning text each time there we go we'll just write out what the text is and here's our page and there it is that's the text that's coming back this hello world that is what we're sending right here if we changed our method if we changed our approach our method from get to post the message changes so we did do a post request and then that is the end point that responded on the server so post this is the message that we get back and the status code is a 201 and if we want to see that we can go over to the network tab without even console logging it if we just come over here there it is there's the 204 that we did for the the pre-flight request now cores will be getting into shortly that's what this one is this PreFlight request that's because we're requesting something on a different origin we're on Port 5500 we're making a request to Port 3000 so there are different Origins so this is a test to see if we're allowed to do this and then 201 that's the response code for a successful post request if we change this back to get that 204 that's going to be gone there is no 204 for a get oh sorry yes we are still dealing with a a different origin so yes we're going to get that but the 200 code that's the one instead of 201 we're getting a 200. the 200 is for the get 201 was for a post okay so that is uh dealing with API Keys setting up the credentials cookies in JavaScript if you need to set a cookie you are setting the cookie for the domain that you're currently on so this script is being loaded by this HTML file which is on this origin so if I call the command inside of here if I say document.cookie and I set my cookie with all the various values I'm going to be setting it on this origin I'm not going to be setting It On the Origin where my server is with the port 3000 it's like they're two different computers and cookies are not meant to be shared they're really meant to stay with the origin that created them so if I want to be able to do this if I want to be able to send the cookie to the other place then what I have to do is I have to modify my request in the options here we talked about having the cash one and we set let's say it's set to default another one that we can set is called credentials now credentials can be set to omit and that means if when I send the request I don't want to include authorization header or I don't want to include tokens that have been set from other places I don't want to include cookies that have been set for other places I want to make sure that I never send with this request with this fetch call I'm never sending this information it could be private information so I don't want to send that stuff with this one we can say same origin which is the default policy for cookies it's the default policy for fetch calls if I'm on abc.com and I'm making a fetch call to abc.com that is the same origin and if I'm doing a request to the same origin the browser says okay I assume that you trust yourself and that you're not going to be sharing bad information you're not going to be requesting things that you're not supposed to request it's on the same origin so go ahead and request whatever it is that you want to request make the fetch to whatever resource you want but if you're making a request to a different origin and this is set to same origin well that's that's automatically going to say cookies cannot be sent there's no cookies that are going to be sent along with this so we can set it to omit meaning I never want to send it I can set it to same origin meaning if I'm making a fetch call to the same origin yeah you can go ahead but if I'm making it to a different origin don't send them or we can change this and say include go ahead send the credentials I don't care if it's a different origin and then we get this this is the browser telling me you're doing something that's not really secure you are passing around credentials you're doing something that you really shouldn't be doing so to protect you to protect your users we're gonna lock down the fetch calls that you're making we're not going to let you handle the data um there's a header here Access Control allow origin if I go over to the network tab inside of here in the headers in the response headers sorry for this one Access Control allow origin it's set to an asterisk it's set to a star meaning yeah yeah anybody's good and this was something that's being sent back actually by our server right here I'm just saying yeah yeah let anybody do anything we're just going to send the Wild Card character back and because we did that we're saying everybody's allowed to get access the data but the browser's saying okay you said to include credentials you're saying it's fine to go ahead and send tokens and cookies and all that stuff off to this other server and the server saying it's allowing anybody so basically nobody's doing anything that's secure so I don't trust what's going on right here I'm not going to let you actually take the data and do anything with it go ahead make the fetch call but I'm not going to let you touch this data because things just do not feel safe to me that's sort of the idea behind course and we're going to come back and talk a little bit more about that in step number eight all right so for right now let's jump back into here we know that include is not going to work with our settings so we're going to set credentials to omit now doing this or doing same origin either one of those that's safe that's fine you're saying if it's going someplace else don't send my cookies if I'm on something that I control go ahead we're good to do that and one last thing that I want to talk about here before we go on to number seven and uploading data is the content security policy in your HTML files you can add a meta tag with HTTP equivalent set to content security policy and what you do inside of here in this string for the content you define what the browser is allowed to do where it's allowed to get its resources from so my default is the fallback for absolutely everything now normally you wouldn't put an asterisk here and say yeah okay you can get anything from anywhere I don't care that's not very safe I do it here just to avoid some having to write the full thing out my scripts can come from the same origin as my HTML or unsafe inline I had to include this one because the live server script that vs code injects to run this server on Port 5500 needs this one but this is the reason why I bring this up connect source when you were doing fetch calls this is the one that you are going to be using connect source is where are you allowed to make fetch calls to it doesn't matter if you're requesting an image file a CSS file a font file an HTML file an XML file it doesn't matter the kind of file if you're doing fetch connect source is what you're going to have to set so each of these values default Source script Source connect Source image source style source font source there's a whole bunch more all these different sources it's just a space separated list of places that you're allowed to get stuff so I could say okay inside of here if I'm connecting to something that is on the same domain go ahead that's fine or if I'm using https to request from anywhere or if I'm requesting something from example.com that's fine I can do that or I can write out a full thing https Json placeholder Dot typeyouco.com and so on and so on just a space separated list of all the different places that you say it's fine to do fetch calls to this is a space sacred list of all the different ways that you can get images or scripts and so on so content security policy we can add it to our HTML files as a meta tag or it is a header so this is the name of the header and this is the value of the header so in a response header for the HTML file we could have this be read as a header all right and so that is the end of number six moving on to number seven getting into uploading data so let's comment this one out uncomment this one moving into number seven uploading these three methods for http post patch and put these three methods are the ways that you can actually upload data to the server now when you upload data it could be a Json file it could be a string it could be a JavaScript object that you do Json stringify on to add it into the body of your request that's being sent to the server or you can attach one or more files so this is going to be my method that I'm going to use here's my endpoint and this is why I have this server set up here is so this is the place where I can do it we've got our image Pickers or sorry our file Pickers for images and Json that's these things right here oh I'm going to clear up the content security policy here yes we have to change this one set data is the method that we're calling there we go okay so yes now we're back into our script right here and the name of our form inside of here that's my form we'll give it the same ID as well my form so get element by ID I can Target my form using that or document.forms.iform is another way that you can access this form we're listening for the submit event on the form when the form is submitted by default it wants to be sent to whatever you have as the action here so I can do this this is where I want to send this form I want to when I click the submit button this is where I want to send it so we should add a submit button here actually all right so we have a button when I click this button the form wants to submit here I'm finding the form and I'm listening for the submit event and I'm saying prevent default so forms what do they want to do by default they want to submit they want to send their data to someplace else get a result and then replace the current page the browser will replace your current page with whatever the server sent back from submitting the form I don't want to do that I want to call a fetch I want to decide for myself I want to send some data here that's what I want to do so I listened for submit and I say don't do the default thing don't actually try to load a new page don't send the data to what the action is I'm going to tell you what to do so we could right here create a JavaScript object [Music] there's a JavaScript object and then we can say our Json string is going to be json.stringify our object now this can be the data that we're going to send to this endpoint let's create a request here foreign [Music] so we're going to submit stuff to here with fetch and the method that we're going to use to be able to upload data I can't use get and upload data other than putting it in the query string so this is what we're going to do we're going to do a post so this is an insert we're adding new data I want to create a new thing on the server there's that and now because I have something right here I can take this string a request of type post has a body and this body can be a string it can be a form data object which is what we're going to use to upload files or it can be some sort of iterable object most of the time it's going to be form data or a string like this now because this is a Json string I should in my headers set a content type to let the server know this text that I'm sending you is a Json string so content type it's one of those headers that you are allowed to set in a request or a response in the request the content type is what you are uploading it's not what you're requesting back remember this endpoint is going to give me that string just hello world right here this hello world string is what's going to come back or sorry from post it's going to be thanks for adding something it's this string it's text that's coming back I'm not getting Json back I'm uploading Json so that's what the content type inside of a request is for it's what are you uploading all right so there's our request and now we can do our fetch we're getting text back from the server so that is going to be the method that we call the response.txt there we are so we're uploading this object to the server we're taking the object we're turning it into a Json string it becomes the body and this is how you upload any data so when I click Send this is the response that we get back from the server we've basically uploaded this object right here to the server it said thanks send us back a response with a 201 status code because it was a post right here 201 status code all right now files if you want to upload files instead we can right here in the body instead of the Json string I'm going to create a form data object so let's create a variable right here let FD equal new form data now I can create it like this and then start calling append the same way we did with headers the same way you can with URL search params the query string parts but inside of here we've got name and value like normal but you can also have a file so you could have a name which is a label and then an actual file object and then there's an optional third parameter which is the name for the file like what do you want to call this file so it's a Json file it's an image it's a XML file PDF whatever it is so you can come up with the file name that you want to use when uploading it this is the label so it's the variable that references the file or the string and we can absolutely do that we can come in here we can say all right I want to get the file that's inside of here so let's come down here and image input Dot value let's console log that uh here we'll put this back to the way it was just so we don't get an error okay so I'm going to pick an image file there's this image and when I send there we go this is my image now if I jump back into my code here and instead of value which is what you would normally do for a text input we can access a property called files this is an array of all the files that were included so in a browser when you go choose file if in the input element you add the attribute multiple it means that you're allowed to select multiple files at the same time but I don't have that so I can only select one this is still going to be an array but if I access number zero inside that array that is going to be this one file and it is a file object just like the one that we created back when we were creating our own custom response objects back in step three I think it was or step four where we were creating a response object we built a file and we put that inside there here is a file object coming from our own computer so here's the name of the file the type the size so we have all this information that we can get to about this file object I can then put this inside of here so we can say in my form data I want to append image file that's the name I'm going to use and then image input dot files number zero that's the file object and then what do you want to call it well I'm going to call it whatever it was called on my computer I could come up with a different name but I'm just going to do this files0 dot name there we go I have created a form data object and I've put the file into the form data object and then the body right here is going to be just this it's just the form data object that's the body that I'm uploading and content type is no longer going to be this it's actually going to be multi-part slash form data yes there's an image and the image has a type but it's all bundled inside of a form data object this is what we're uploading so this is the type of this so I pick a file there it is I send there we go here's my response back from the server I've actually just uploaded that file and if I look in the network tab I'll see the payload was actually a file that got uploaded all right so that's one object now there is another way that we can do this and that is here in the form data object when you create it you can actually just pass in the form so I could manually pick all the files that were being loaded and append each one of them into my form data object but if you pass in your form it's able to go and read through your form and every element that has a name attribute it has to be the name it's not going to work with just ID you have to have the name attribute but anything with a name will automatically get added as long as it's cut a value will automatically be added into this form data object so now I'm actually going to upload multiple files because I said yeah everything inside my form the body is going to be that and that's what this multi-part stands for is you're able to upload multiple objects so I'm going to upload a Json file and I'm going to upload an image file there we go I've got the two different files and you notice when I do this how everything else is grayed out except for the image that's because in my HTML I added these accept attributes so any kind of image or only Json files so when I send there we go now let's take a look at the network tab to see what happened here in the network tab here is the fetch request the post inside of here there's my general things there's the 201 status code coming back there's where I was sending it to Port 3000 my response came back it was some text my request content type multi-part form data content length that's for all the files not just the one but that's all the files the payload that's when I was uploading so when you are uploading multiple things when your content type right here is set to multi-part this is what happens these boundaries get created so these are this is a string that will be repeated at the beginning of every single piece so I had a Json file content type was application Json then I had an image file was this and then there was nothing else this is the end of the whole thing so there's these boundaries and it puts together the whole payload to be uploaded so that is what we get by using a form data object is the ability to had a have a whole bunch of things including a whole bunch of files that we can bundle together as the body setting this is the content type we can send it to the server all as one package all right moving on to number eight the one that so many people struggle with moving on to talk about course cross origin resource sharing now this isn't so much a command that you call it's not a method that you use it's more a concept it is a bunch of security that has been put in place it's a policy that has been implemented by all the browsers all the browser companies agreed on this policy this is how we're going to protect users we want to make sure that when the JavaScript running on a web page that comes from domain a is making a request to some other domain some other origin when that request is being made we want to make sure that the data coming back the browser and the server are both in agreement that yes you're allowed to have this data and the settings in your fetch call the settings in your request are not going to be something that's going to leak private information so cores while it can be frustrating while it can be difficult to wrap your head around at times is a very necessary part to keep everyone safe so just a few notes for you that you can look back and reference to remember these things so requests that are not get method or a head method must include in the headers one header called origin which is hey what's the origin that you're coming from that will get sent to the server the server looks at that and then decides okay I need to set some headers there's going to be a header set by the server called Access Control allow origin and then it's going to have a value which oftentimes it's just an asterisk meaning I don't care anybody's allowed to access my data but it is also possible for it to send back something like this if the server sends back this header with this value hey that's where I'm running my thing that's where my website is running so that comes back from the server my browser is going to look at that it's going to look at my origin and say hey cool you are allowed to do whatever you want to do if you want to send cookies you can send cookies you don't have to but I'm going to allow it if you want to use the data that comes back from the server that's fine too you're allowed to use it so you can take it you can stick it in an image you can put it on an HTML5 canvas you can use it there that's absolutely fine the most common error that you get with cores is the one that says Access Control allow origin header missing or it doesn't have a value that matches your origin and that just means that you either set something in your headers that went to the server or you're using settings in your fetch request that the server didn't like or their server is saying no from your domain you're not allowed to do this people who are writing the code on the server side may even look to see okay do you have your API key that authorization header with the Json web token or an X API key header that has the API key if you don't have those things I'm not going to allow you to access the data so it's going to turn this off which means the browser is going to say Coors error you can't touch the data doesn't matter if it comes back you're not allowed to touch it so things that don't need this Access Control allow origin the things that are allowed to go through are if it's a simple request so the method is head get or post so get we've talked about it's just hey give me some data post I'm uploading some data I don't necessarily need a response I'm just uploading some data head it's like a get request or a post request but all you're sending is the headers you don't want a response you don't care about a response other than the headers I'm sending the request headers I want the response headers back maybe I need to look and see if I'm getting the right headers so if it's one of those three okay that's good that means that it's a simple request but if it's one of those three and the only headers that you're allowed to set in your request are these ones so accept what are the file types that you're going to accept back language what's your preference for language if there's a choice between language of files content language very much like accept language content type I'm going to be uploading with post a Json file okay you're allowed to do that um range so I'm getting back a font file and I'm going to be wanting certain parts of the data so that's the range header content type if you're setting content type these are the only allowed values that you can use application X www form URL encoded is what's used by default when a form is submitted if you're actually uploading files instead of just text or data or string multi-part form data is what you have to use or plain text you can be uploading that so I can't be posting a Json file I can't be uploading an image file even though oh yeah it was a one of these types we also have the Restriction that these are the only headers that can be set and these are the only allowed types if it falls outside of this they're saying okay it's not just a basic simple request so we need more Security in this case and you know the values for these ones this is an additional restriction that was added on by some of the browsers if you use accept accept language content language you're only allowed to use standard values you can't make up your own values you have to use ones that are part of the standard and the last one is you cannot stream data from the browser to the server it's got to be here's the file here's the whole file there you go it can't be a readable stream you can't be streaming the data with unknown end to it um the request that goes out first this options request now we've talked about head get post options is another kind of request it's another HTTP method which was created specifically for course this is this pre-flight request if you've ever heard of a PreFlight request basically when the browser sees that you're going to be making a request to a different origin it's going to create something very much like a head request it's going to say okay here's some headers I'm going to set the access control request method I'm going to set the access control request headers so I'm saying these are the headers this is the method I'm going to be using here's my origin there's a bunch of things that the browser is going to put inside of here it's going to then send this request which is just the headers off to the brow off to the server the server will then figure out whether or not you are allowed and it will send back headers which will include this one hopefully Access Control allow origin to say whether or not you're allowed to do it and it's only after that initial request and exchange of headers that the browser will actually do your post or your get or your put or your patch or your delete whatever the method is it's only after this initial options request that your thing that you're trying to use fetch to do it's only after that that it will actually go through so in the request object that you create there is a mode property that we can set so we've talked about credentials where you can decide whether or not you want the cookies to be sent along we've talked about cash as one of the options inside of there so if you create a request I don't have a request object right here but if you were to create a request object and there let's just move that up so I can use it as the URL in my options we've talked about cash and we can say that yeah we're just going to use the default method for that credentials let's set it to Omit or same origin you've got method well we can do post get patch put delete whatever we like we've got headers we've got the body forget we wouldn't have a body but for post we would and the mode is the other one and the values that we have right here there we are No Chorus course same origin navigate if you put things to no course you're telling the browser oh no don't worry about it it's not a course request let's pretend that I'm not requesting to a different origin so it's going to skip the options request but if you didn't meet these requirements if you were not using a simple request guess what things will fail course is going to be the default value for this if you're actually making a cross-origin request if you're making a fetch call to a different domain this is going to be what the browser puts in there but you're allowed to hard code it you can come in here and say oh yeah I'm making a course request look I'm going to pick some dot photos this isn't where my web pages my index.html is on 127001 Port 5500 it's not here so yes this is a course request but I could do this I could say hey it's a no course request so I'm telling the browser don't make a options request don't send that initial bunch of headers off to the server don't ask for an access control allow origin header to come back so basically I'm saying well I'm going to send a request off to the server but I know that because it is cross origin I'm not going to get the thing that I'm asking for that's what we're seeing here if you don't meet the requirements with here when you set it to course the options request will be made you have to meet the requirement to get the right values back if you set it to no course it doesn't really change what's going to happen it just means you're going to skip over the options thing which means you're not going to have that the header if it is a cross-origin request and things are going to fail as well same origin means hey I'm making a request to the same origin so you should try and stop me if I'm not making a request to the same origin um this would be something that you would use if you had a whole bunch of requests that were dynamically being made you could create your own request object where you're just changing the URL the request object will have the same settings for every single one of these requests it's just the endpoint changes you could set this as a default value for the request mode and this last one navigate it's one that you can't set through JavaScript it's the one that the browser will set and basically if you click on an anchor tag and you're navigating to a new page you submit a form and it's loading a new page that's a navigate action any action that's going to replace the current page is a navigate action it's not something that you can set through JavaScript though these are the three you can set in JavaScript but you can't get around the course requirement by changing these okay now if you didn't meet the requirements it is possible if you said hey I'm making a course request you're saying go ahead make that PreFlight request good for you now you've got it back but you didn't get the answer from the server that you wanted you didn't meet the criteria so it's going to give you a course error or it's going to give you the response object saying okay yeah yeah you got the response object but because you didn't meet the course criteria you're not allowed to get to the data that is an opaque response that's what it's called opaque responses are can be generated when you say it's not course so the request goes to the server the request comes back but it was a course but it was a cross-origin request the contents come back if it's text that you're going to use inside of a script tag or a link tag or it's an image video audio that you're going to put on the page or the content for an iframe an embed or an object okay you can take that text or that image and display it in one of those containers if it's an image that you're requesting that you're trying to use inside of an HTML5 canvas it will not let you if it's a web font it will not let you if you're using the cache API and you're calling the add or add all methods it's not going to let you the HTTP status code for an opaque response is going to be zero so I have a couple of examples on this page right here I'm going to do two fetch calls for the image this image right here and let's make it the same as the other ones 300y 200 High so I'm going to make two requests for the image two requests for this local Json file so the Json file is local it's right here on my domain my origin so those are not cores calls so setting no cores or using the default which is core which would be whatever the origin is here we can go in here and actually change it now I can say course it's not a cross-origin request but I can say course same thing up here I'm not specifying it but because it is an external URL it means that this is a course request we can take a look to see at the values that we're getting back here there we go so my two local requests for the Json file doesn't matter if I set the mode to cores and no course it works there's no restrictions I can do whatever I want with that data here for the image I'm going to the pixum website when I set it to cores I've met all the requirements I'm not sending my cookies I'm not doing anything weird so it comes back with a 200. by setting it to no course I get a zero as my status code this is an opaque response this is the kind of response that comes back that says okay you send a request you send some data I'm I got the stuff back in the browser but JavaScript is not allowed to touch it you're not allowed to do anything like put the data into a canvas or use the web font as part of your CSS because you didn't meet the security requirements so that is what an opaque response if you ever see this status code zero that's what it means it means that you got an opaque response you didn't meet the course requirements so the last takeaway here is when you get an opaque response or when you want to get an opaque response if you don't want to go through all the hurdles of making sure that all the things are correct you want to just say oh yeah okay treat it like a no course request I'm ignoring the course policy when you do that it's not that you're saying okay I don't care or let my page break it's I don't care about getting a response back from the server I want to save time maybe I don't want to wait for the pre pre-flight request and then my actual request to go to the server maybe the person's got a very slow internet connection I don't need to get the result back all I need to do is send some data to the server okay great go ahead send the data to the server upload the file if that's all you care about doing if you don't want to deal with or don't want to work with the response you don't have to that's what it is and we talked about response headers and forbidden header names before this list right here in the response this is a safe list so when you look through the response and the request header names you will find a section called course safe listed response headers so this is the list of names that you will have that course will send you back that cores will let you access through JavaScript cores will prevent you accessing some header names so if I make a request to my domain versus another domain I will have a different set of headers that I'm allowed to access in JavaScript in the response objects these are the ones that if I'm making a course request that I'm still allowed to access through JavaScript all right moving on to dealing with multiple requests so how do we deal with multiple requests all right moving into here now when I say multiple requests I'm not saying uploading multiple files we've already talked about doing that I'm talking about times when I need to talk to multiple servers or I need to talk to multiple endpoints on a server and I want to get all the data at the same time or I need to get the data in a specific order so there's a sequence or I have to do everything at the same time so to do everything at the same time the promise object the thing that fetch uses internally has a method called all meaning I want to get responses from all these promises I'm going to pass in an array of promises and when I get the response from all of them that's when I'm going to work with them race means I'm going to give you an array of promises give me the first thing that comes back all settled is give me the array when everything is successfully done so I'm just going to use promise.all I have another video talking about all these or videos talking about promise.all promise.race all settle and so on for right now I'm just going to use promise.all the sequence is the simpler one the sequence be something like this so if I do imagestr from a fetch I can do this I can say then we get our response we do our check now this would be where we could return it we can extract The Blob but we can also use this as a trigger to say all right I've got my first response now I need to get my second one so instead of returning the blob I'm going to say return fetch and here's my other file so that's going to return a promise which down here hey it's another response object and we can do the same thing as we did right here inside this one now I do want to get this blob as well so maybe I will save that we'll say uh up here this would be my image response and we'll have our Json response so we're saving that inside of here and this can even be blob there we go so I'm putting the promise that will eventually give us the blob inside of this variable and then inside of here I can do the Json response is response.json there we go there's the two promises inside of there now where we want to deal with them inside of the next then I have two things that are promises image response and Json response so I can use promise.all so we can say right here return promise.all and this is an array being passed in image response and Json response now inside of here what's going to get passed in here is going to be an array it's going to be an array that has the blob and the Json turned into a JavaScript object so I can use destructuring to say in here here's my function inside of here I've got my image blob and I've got my data object those two things so we'll just write out the data object there we have it so we're going to fetch the image first when that comes back when we've got the response I'm going to save this blob here or the promise that will resolve to a blob inside of here and then I'm going to call the next fetch when I get the response for the next one I will extract the Json and then I will wrap those two promises the promise that resolves to a blob the promise that's going to resolve to a Json file turned into a JavaScript object those two things will get passed here so the promise.all will sit right here when both of them have finished resolving then I get an array that contains the blob and the JavaScript object and there it is there is our JavaScript object so we went to the random data API we got 10 users that's what's inside the data object and if I write out a blob that should just give me a blob it'll tell me the size of that there it is there's the size and type so those are the two things that we got back so that was the sequence and if you just want to go directly to the promise.all the other way that we can do this if you want to get them all at the same time you can do this you can say promise dot all it's an array dot then dot catch so inside of here I will pass in Fetch for the image string and fetch for the Json string so there's my two fetch calls they are inside of an array and this then will have an array with two responses so image response and Json response to wrap that in parentheses the array that is there we go so I have two response objects here and I have to do the same thing that I did here to be able to extract or rather here the response blob response Json I have to return a promise dot all which is an array and inside the array is my image res dot blob that's the first promise and the Json res dot Json that's the second promise so in my final then what I'm going to be getting inside of this array is the blob and the Json data so two different ways of writing it but achieving the same thing here or achieving similar things here I'm saying I want to do both fetch calls at the same time when I get both responses I'll extract the data at the same time and then work with the data at the same time here I wanted to do the image response first and then fetch the second one so we can add another then and work with the data here this fetch could be in a Next Step so I could return response.blog down to the next one and then in the next one I do something with the image and then call fetch so let's let's make that change foreign so we're going to return that which means this is no longer in here so in this second one right here what we're getting back is the blob and in here we can work with blob add image to the page Etc whatever you want to do then we do the fetch for the Json and then here's the Json response so you can break it up into this series of steps using the then and this is one of the reasons that I prefer the then to me this just feels more logical to break it up into the steps I can say do this then this then this then this and I will often turn these into functions of their own so instead of writing the code right there I will just have the function names and this will just be a series of thens with function names inside of them do this then this then this then this so each one of these is this little Atomic pure function that we can do all right and that brings us into step 10 our final step the abort so this one will be a fairly quick one if you want to stop a fetch call what we can do is have somebody click on a button or do some other interaction to the page to stop a fetch call that has already begun so let's add a URL inside of here here I'll just grab one from the previous page there's from the multiple one let's do this all right now let's make this a really a much bigger one so we'll say it's 3 000 pixels wide 2 000 pixels high so it's a much bigger image so it's going to take a little bit longer um to do an abort to stop a fetch call you have to create an abort controller so there's an abort controller object it has a property called signal this signal property is what we pass into our request object or effect object so let's to create a request object let's break this into steps to follow what we're doing previously in the options here we can say there's a property called signal if I could spell it correctly there it is like this now you can just put the word signal it's the same property and value the same variable for the value as the property name so you can just write the word signal I'll write both just to make it clear here and we pass this request in here all right so when we don't get requests responses back so the network fails that will trigger an error if we don't have the right status code if we're throwing an error inside of here it'll trigger this the abort will also trigger a error so let's take our response foreign this is an image so I'll call the blob method not that we're going to be doing anything with it so here's our blob so I'm just going to write out that message all right so let's test this out back in main we'll make sure that we're on number 10. there we go oh I need a function yes all right so let's do that so export function get data there we are now we have the function there it is got the blob all right so we did the fetch there we go now let's slow this down a little bit in the network tab there is throttling so let's go to slow 3G just so we can slow this request down a little bit refresh the page and it'll take a second this is going so the fetch is being made we're still waiting we're still waiting we're still waiting eventually we will get that image back and it will write the message so we can check the network tab here even there we go got the blob okay so it finally came back with the result so we know it's going to take a while that's going to give us a little bit of time to work with I'm going to go into my HTML and I'm going to add an abort button so I'll put it right underneath this image and let's there's the abort button right there I'm going to change this throttling to fast 3G instead of slow 3G just to speed it up a little tiny bit so there's our abort button and we're going to listen for clicking on that board button so we will say right here um when this function runs we're going to let abort BTN equal document get element by ID foreign and we'll add the event listener for the click event when that happens what do we want to do we want to stop this fetch call so in a request we have that signal that signal is the signal property from the abort controller that we created basically we've just attached something to the fetch call so that we can reference it later on inside of the button click right here our controller we do that that's all we have to do access the controller and call its abort method and then whatever has this signal connected to it will be stopped so let's refresh the page and click abort there we go we aborted it and here is the error Dom exception the user reported a request I didn't have that in my code I'm just saying console.warn my error says invalid this is the abort right here that we're doing that triggers an error so we're inside the fetch we haven't got the response yet we aborted it at this stage it triggers an error that comes down here and the error is this this Dom exception error see right there is where it's triggered inside this get data method all right and those are the 10 steps now I also threw in here a bonus for you if you ever want to measure the download progress with fetch it is not possible currently to measure the upload progress so if you are submitting something to the server there's no way for us to measure the upload progress but we can measure the download progress when you do your fetch call it is possible to use a reader object the body is an actual Stream So This is a data stream this body object and the body object is inside the response remember the file the Json file the image that are inside the body of the HTTP response well we have a built-in thing called get reader which will create a reader object that lets you read the file as it's being downloaded so we can get from the headers the content length so we know the size of it and what's going to happen is we're going to call this read method on the reader that we created so we're going to continually every time we get a chunk of data we'll read it another chunk we read it another chunk we read it another chunk we read it and we just save all the chunks inside of an array so we're calling push when we call read we get a value we put that into the array so we have this array called chunks and once we're done the whole thing so we're going to keep going going going going going until the reader says hey you've got no more data the done value is true when that happens we're going to exit from our Loop we're going to take the total bytes that were downloaded we're going to create a byte array and then we're going to Loop through the array and we're going to put all the chunks of data that's inside this array into our byte array once we have that we're going to create a blob object with the byte array which is going to be our image and then remember our old trick with create object URL we can take that byte array reassemble it it's going to be the blob that we then load into our image so if we swap over to number 11 here and we're there we go so it's loading the progress done and then the image appears so that's the download progress and this example is using a blob but if it were text you could also just do this so create a new text decoder say this is the encoding that we're using take the byte array that we created up here filled with all the chunks of data and decode it so take all the data that you got trade it as if it's a utf-8 string put it into this variable right here and then if it's a Json string you can call Json to parse if it's just a string just take the string and do whatever it is that you want to do with it on your web page but it will have given you the progress as it was occurring all right and that's it you now know everything that there is to know that you will need to know about fetch so I hope that helps I hope you enjoyed that if you have any questions feel free to leave those in the comments I answer as many as I have time for and as always for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 37,953

Keywords: MAD9013, MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, fetch, fetch api, request, response, http methods, cors, headers, urlsearchparams, querystring, abort, abort controller, promises, promise.all, promise.race, promise.allSettled, async await, async, await, formdata, encoding, blob, file, files

Id: 2sQ9xiEAXNo

Length: 139min 52sec (8392 seconds)

Published: Thu May 18 2023