Download "Ten Steps to Mastering the Fetch API"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F2sQ9xiEAXNo%252Fmaxresdefault.jpg&w=1139&q=75)
Please wait. We're preparing links for easy ad-free video watching and downloading.
Table of contents
Similar videos from our catalog
![พัฒนาแอพด้วย Flutter สำหรับผู้เริ่มต้น 7 ชั่วโมงเต็ม [FULL COURSE]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2FVDg_PXyNwlyB_b2dtuGSdPDfPAA%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F3jGj-1-m_zA%252Fsddefault.jpg%253Fv%253D5ff08161&w=1139&q=75)
![Canvas Drag & Drop Objects Tutorial | HTML5 Canvas JavaScript Tutorial [#10]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2F-tApRhJnfx6hdWyUHScBKMvk1sQ%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F7PYvx8u_9Sk%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9qmo-7nJ-NQ%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FL3XY2wEB7oI%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FMnG_lre07mQ%252Fmaxresdefault.webp&w=1139&q=75)
![เรียนรู้การใช้งาน Git & GitHub | สำหรับผู้เริ่มต้น [FULL COURSE]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2FK4rUcnmmqgPfdPJrOdN01vs6_yI%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FX3bQzBhRMKQ%252Fsddefault.jpg%253Fv%253D645f337f&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F_S3cHekeGpg%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FaOKIV6lX_PE%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FfOyKbfJAPE8%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FsszC4j4Wcpo%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:03
okay so today we're going to be talking00:00:06
about the 10 steps to mastering the00:00:08
fetch API so I am going to be covering a00:00:11
huge range of Technology associated with00:00:14
the fetch API00:00:16
we're going to start off talking about00:00:17
basic fetch calls the idea of promises00:00:20
the then catch chain then looking at how00:00:24
using async await with a try catch lets00:00:27
you achieve the same thing with slightly00:00:29
different code00:00:30
moving into URL objects request objects00:00:33
and header objects00:00:35
then talking about response objects all00:00:37
the different parts of the response the00:00:39
different ways that we can create them00:00:41
and use them00:00:42
talking about General HTTP and the00:00:46
methods that we will be using with our00:00:48
fetch calls00:00:49
moving into the stuff that comes back in00:00:52
the response when we get a response00:00:54
object back from the server what is the00:00:56
different types of things that we can00:00:57
get and how do we access the content00:01:00
inside that response object00:01:02
we're going to talk about how to put00:01:04
HTML content onto the page based on the00:01:07
contents of a response whether it's text00:01:09
HTML Json or images how we can put that00:01:13
into web pages we're going to talk about00:01:15
API keys we're going to talk about00:01:16
authorization00:01:18
um00:01:19
query strings different ways that you00:01:22
can use API keys and a lot a lot more00:01:25
information about headers we're going to00:01:28
talk about security policies and how to00:01:29
protect your00:01:31
users on the web pages that you build00:01:34
we'll talk about how to upload data how00:01:37
to bundle just data from a form data00:01:41
that you generate within your Json or00:01:43
within your JavaScript and also how to00:01:46
upload files one or more files we're00:01:49
going to talk about course now this is00:01:50
something that a lot of people struggle00:01:52
with so cross origin resource sharing00:01:54
how does this work when you try to make00:01:57
requests for data that are coming from00:01:59
different URLs than the origin that00:02:02
you're on how does that work so we'll00:02:04
talk about that00:02:05
we'll talk about dealing with multiple00:02:07
fetch calls either in sequence or00:02:10
happening at the same time we'll talk00:02:12
about how to abort a fetch call so if00:02:14
you start a fetch call and it's still00:02:16
running but the user wants to navigate00:02:18
away from your page or they want to do00:02:20
something different how do you stop that00:02:22
fetch call so we'll look at doing that00:02:24
and then as a bonus after the 10th step00:02:27
we'll talk about how you can actually00:02:28
measure the download progress of00:02:31
anything that you are fetching00:02:34
all right so what I have here set up00:02:36
this00:02:38
set of files right here if you look in00:02:40
the description you'll find a link to00:02:42
the GitHub repo that has all this00:02:44
information all these files are going to00:02:46
be there including00:02:48
a small little web server that I set up00:02:50
uh this one's just for one of the items00:02:54
in this list we're not going to be using00:02:55
it for every one of them but we have it00:02:57
there just for being able to upload data00:03:00
to have an endpoint where we can upload00:03:01
files00:03:03
so I have broken this up into a whole00:03:06
bunch of little files and what we're00:03:07
going to do is just import this method00:03:09
from each of these files and call the00:03:13
one method so we will just comment and00:03:16
uncomment these files one at a time to00:03:19
look at those00:03:22
okay step number one basic fetch so00:03:25
jumping into here00:03:27
in our basic fetch file we want to look00:03:29
at what is the simplest way that we can00:03:30
do a fetch call with the default values00:03:33
for absolutely everything and anything00:03:36
so Inside My Method I want to fetch this00:03:39
endpoint now if I were to take this and00:03:42
just jump into the browser00:03:44
right here00:03:46
we take a look at that here we go this00:03:49
is the result00:03:51
I'm going to fetch this Json file00:03:55
now it's an array that's filled with a00:03:58
whole bunch of objects that's what Json00:03:59
is00:04:00
it's arrays and objects strings numbers00:04:03
booleans all that fun stuff00:04:05
so I want to get this data but I don't00:04:08
want to replace my current web page with00:04:11
that data that's the purpose of fetch we00:04:14
want to be able to00:04:16
tell JavaScript to tell the browser hey00:04:19
I would like a copy of this file so that00:04:22
I can use it and then generate some data00:04:25
I want to take all the names out of all00:04:27
these objects and build a list on the00:04:30
page or something else so we want to get00:04:33
some data and we want to use it as part00:04:36
of our web page without having to00:04:37
refresh the entire web page that's the00:04:40
idea behind fetch00:04:42
so what is the simplest way that we can00:04:44
do this00:04:45
well we have this command called Fetch00:04:49
so every browser supports this every00:04:51
browser since about 2016 has supported00:04:54
this command Fetch and we can pass to it00:04:59
a string that is a URL so this is the00:05:02
one that I want to get and there's a00:05:04
whole bunch of options that we can set00:05:05
but like I said we're going to use the00:05:08
most simple method with all the default00:05:10
values so this is all that we have to00:05:12
pass in this string we pass to the00:05:14
method00:05:16
I can save it I can run it00:05:19
that has actually run if I go into my00:05:22
network tab here we can see in the00:05:25
network tab that sure enough a fetch was00:05:28
done to this user's endpoint this URL00:05:31
and here is the data that came back so00:05:34
we got that data coming back to the00:05:36
browser we're still on the same page but00:05:38
we did actually fetch the data00:05:41
now if I want to use that data on my00:05:43
page00:05:45
what I need to do is I need to00:05:48
add more to this00:05:50
so we're going to put a couple of00:05:52
methods called then00:05:55
chained onto the end here now I can00:05:57
write them all in the same line but it's00:05:58
much easier to read if you write them00:06:00
like this stacked one on top of the00:06:02
other00:06:04
the fetch method returns something00:06:05
called a promise00:06:07
basically it's a wrapper around the00:06:11
response that's coming back in the00:06:13
browser when we pasted this URL in we00:06:17
got a response that came back from00:06:20
this web server it sends us back a00:06:23
response object inside that response00:06:25
object was the Json file that we're00:06:27
looking at right here00:06:28
so over here00:06:30
I want to do the same sort of thing00:06:33
I'm going to say hey go get me the00:06:35
response object from that URL00:06:38
when you get it back00:06:41
this then method will sit there and wait00:06:44
until the response has come back00:06:48
so I can put a function inside of here00:06:53
so we can write it like this just a00:06:56
standard function or you can write an00:06:58
arrow function like this00:07:02
so inside of here00:07:04
what's going to be passed into this00:07:06
function I could also use a named00:07:08
function if I had a function here called00:07:11
Fred then somewhere else on my page00:07:13
here's that function Fred00:07:17
the then method will take whatever was00:07:19
inside the promise that this thing00:07:21
returned which is our response object00:07:23
and it'll pass it to this function00:07:26
so we will have a response object00:07:30
you don't have to use the full word00:07:32
response this is a variable I could do00:07:35
resp or res something like that rep00:07:39
but this is the response object that is00:07:41
coming back from here00:07:44
now Fred okay I'm gonna skip over that00:07:48
I'm gonna make this a little bit simpler00:07:50
with an arrow function but I still get00:07:52
this response object00:07:57
there we go00:08:00
so here is my function instead of having00:08:02
a named function over here I've just got00:08:03
an anonymous Arrow function00:08:05
this is the response that came back from00:08:07
the server00:08:08
if I do console.log I can take a look at00:08:12
this response object00:08:13
there it is here is the response00:08:16
this is the URL this is where we sent00:08:19
the request to and what was the status00:08:21
status was 200 everything was good we00:08:24
got back what we were expecting to see00:08:26
fantastic so I have my response00:08:31
usually you'll want to check and see if00:08:34
the thing that came back actually did00:08:36
work and that is actually the purpose of00:08:39
having this catch at the end here if00:08:41
something went wrong00:08:43
so when we do the first fetch if we're00:08:46
unable to connect to the network this00:08:49
command will fail00:08:50
and down here we will get an error00:08:53
object00:08:54
so again we have an function inside of00:08:58
here00:08:59
my error object00:09:01
will be coming from here or it could be00:09:03
coming from this then or it could be00:09:05
coming from this then00:09:07
if there's a failure anywhere in any of00:09:09
these00:09:11
the error will be passed down to this00:09:13
catch method so inside of here we can00:09:16
console.warn let's say00:09:19
the message we can take a look at that00:09:20
if something failed00:09:22
now inside of here we always want to do00:09:25
error handling00:09:28
you always want to check for problems at00:09:31
every step so if my fetch00:09:34
got a result but the result was say a00:09:37
404 error maybe I mistyped the name of00:09:41
this so that's going to fetch but it's00:09:45
going to return to 404 error00:09:47
so we can check that we can say okay00:09:50
what is the status there's a status00:09:52
property00:09:55
there it is 404 we got a 404 error and00:09:59
right here this is the error message00:10:03
that's happening down here00:10:05
so this thing failed to get the browser00:10:08
is telling us that this fetch failed and00:10:10
it's writing out an error message this00:10:13
isn't the console.warn sorry this is the00:10:15
browser writing out an error message to00:10:16
say that the fetch failed but00:10:19
in hours we know what the status is 40400:10:23
it didn't exist there is no page called00:10:25
this00:10:26
I want to check and make sure that the00:10:28
status is somewhere in the 200s with00:10:31
HTTP status codes the 100s are all an00:10:35
intermediate status the 200s are all hey00:10:38
everything worked out three hundreds00:10:41
things are probably good but there was00:10:42
some sort of redirect or something like00:10:44
that that happened so you asked for this00:10:46
resource but I gave you this one instead00:10:47
I still gave you something but there was00:10:49
something that had to be changed about00:10:51
it the four hundreds there was something00:10:54
wrong with the request I couldn't00:10:57
complete the request because you didn't00:10:59
have permission you didn't give me the00:11:00
API key there was something wrong with00:11:02
the request 404 the page isn't there00:11:06
so request was sent response came back00:11:08
but there was something wrong00:11:10
and then anything in the 500s that is00:11:14
server-side error so the programming on00:11:16
the server side failed for whatever00:11:18
reason now I want to know if everything00:11:22
is in the 200 to 299 range00:11:25
and that's what we're going to do here00:11:27
we're going to say00:11:29
if response00:11:32
or my resp variable here00:11:35
dot ok00:11:37
if it's okay it means that it was in the00:11:40
200 to 299 range if it's not so I'll do00:11:44
this if not okay I will throw new error00:11:55
and we can write some sort of message00:11:58
so that it comes up and this one we will00:12:00
see here00:12:01
we change this so we will get a 40400:12:03
error this will catch it throw an error00:12:06
the error will come down into this catch00:12:09
and this function right here will run00:12:11
because we're generating an error00:12:15
there we go was not a valid response now00:12:18
if I change this back to the proper00:12:22
users00:12:24
there we go I don't see the error00:12:26
message happening00:12:27
so instead what I want to do is I want00:12:30
to take the response that came back and00:12:32
I know it's a Json file so I want to00:12:34
extract from the response the Json data00:12:37
I want to take the string that's inside00:12:39
the file00:12:41
which I know is a Json string and I want00:12:44
to turn it into a JavaScript object so00:12:46
we will return00:12:48
resp dot Json and this is a method00:12:52
to extract00:12:55
Json string00:12:56
and convert it to a00:13:02
object an object00:13:05
all right00:13:08
returning00:13:10
from a VIN will take us to the next then00:13:13
this is going to return us00:13:16
return a promise and the promise will00:13:19
sit here in front of the then until it00:13:22
has resolved when the promise00:13:24
is ready so basically what we're saying00:13:27
is whenever this method is finished00:13:29
extracting the Json string converting it00:13:31
into an object when all that's done00:13:34
this function will be called00:13:36
so we're doing Fetch and then we're00:13:39
going to call this function and then00:13:41
we're going to call this function and00:13:43
the cool thing about that is it's always00:13:45
going to wait00:13:47
and so our00:13:49
data object right here00:13:53
if I console.log the data object we can00:13:56
see the contents00:13:58
there it is it's an array with 1000:14:00
objects just like we saw here it's an00:14:03
array00:14:04
that has inside of it 10 objects00:14:12
there we go00:14:13
same thing that we have right here and00:14:16
now00:14:17
this is a JavaScript object like any00:14:20
JavaScript variable and if I want to00:14:22
build HTML content with it I can which00:14:25
we're going to get into in a future step00:14:27
all right so we have this now00:14:30
why do we use the then00:14:33
one last thing in this first step why do00:14:36
we use the then00:14:38
and it's because I can't do this I can't00:14:40
say hey I want to go get that data and00:14:43
I'm going to put the result00:14:45
here's my response object I'm going to00:14:48
put it inside of here and then what I00:14:50
want to do is I want to get that data00:14:52
let data object00:14:54
equal response dot Json00:14:59
and console.log00:15:01
data object00:15:04
this is going to fail this will not work00:15:08
and it won't work because00:15:11
we're not waiting right here we're00:15:14
saying go do this thing00:15:16
now JavaScript is going to be happy00:15:18
enough to send that request off00:15:20
it'll say okay I'll go and I'll get that00:15:22
stuff for you00:15:26
and it looks at first glance like what00:15:29
it's going to do is it's going to say00:15:30
all right we'll put the response object00:15:31
into here00:15:33
but this is going to be a promise object00:15:37
because this thing returns a promise00:15:39
object it doesn't return the response it00:15:41
returns a promise object that sits here00:15:43
waiting until whatever it is is done00:15:47
when it's complete then00:15:50
this is the contents of that promise00:15:52
here we're returning Json string turned00:15:56
into a JavaScript object wrapped in a00:15:58
promise that sits here until we have the00:16:01
actual data then it gets passed into00:16:04
here00:16:05
here we're not waiting so this is going00:16:09
to fail00:16:10
here we go uncaught type error00:16:11
response.json is not a function00:16:16
so we can't call response00:16:19
because this thing is a promise object00:16:22
promise objects don't have a method00:16:23
called response or beca called Json so00:16:26
this will fail every time00:16:41
all right so that's the end of step one00:16:44
that's your basic fetch that's00:16:45
understanding promises that's00:16:47
understanding the sequence how we can00:16:49
chain these things together with the00:16:50
thens how you always should have a catch00:16:53
at the very end of it00:16:54
because we always want to do error00:16:56
handling we always want to check and00:16:58
make sure that things worked at every00:17:00
step along the way00:17:02
okay moving on to number two00:17:06
so the alternate syntax00:17:09
moving into here try an async so this is00:17:13
the different syntax than the promise00:17:15
where we had00:17:16
we were doing fetch00:17:19
then dot then dot catch00:17:25
and we were doing that because this00:17:27
returns a promise and then we were00:17:29
returning a promise from here and this00:17:31
was the last step in our sequence00:17:33
and this was here to catch an error at00:17:36
any step along the way00:17:38
now if you want you can say that your00:17:41
function is asynchronous00:17:43
meaning if you do anything inside this00:17:46
function that uses a promise00:17:49
you can use the keyword await00:17:52
to pause at that step00:17:56
so what do I mean by that well00:17:58
I can do a fetch for the URL and I'm00:18:01
using the same one as before00:18:03
and that thing that I was saying never00:18:05
to do00:18:07
we can say hey here's my response object00:18:10
and then from my response object I'm00:18:13
going to get my data object00:18:15
and we're going to say00:18:17
we've got a response and from the00:18:19
response I'm going to extract the Json00:18:23
and you can see00:18:24
it automatically did this for me this is00:18:27
what we want to do00:18:29
in front of the fetch00:18:31
in front of the response dot Json00:18:34
anywhere that we are going to00:18:39
call a method which returns a promise00:18:42
which is something that needs to wait00:18:44
for a little while before getting a00:18:46
response00:18:47
we do this because it's asynchronous00:18:50
we're allowed to do this we can say all00:18:53
right color fetch but don't assign the00:18:56
result to this variable until after it00:18:58
comes back00:19:00
again here don't do anything until we've00:19:04
got the response back so we can00:19:07
console.logresponse here and we will00:19:09
have an actual response object and then00:19:12
down here00:19:13
console.log data object we will actually00:19:15
have the data object coming back00:19:19
there it is there's my response and00:19:21
there it is see this is in my second00:19:23
file so I'm getting the same results00:19:25
doing the same thing00:19:28
so a lot of people will look at this and00:19:31
go okay this is much simpler shorter00:19:33
it's only two lines of code I don't have00:19:35
to write all the thens inside of here00:19:38
my personal preference is to use the00:19:40
then chain I like how it encapsulates00:19:43
all this functionality but I know that00:19:46
that is not everybody's preference some00:19:49
people do prefer this syntax00:19:51
the downside of this syntax is we can't00:19:55
just leave it like this because we have00:19:56
zero error handling here00:19:59
if we want to do error handling00:20:02
we still have to add that in here we00:20:04
have to wrap00:20:07
all this code inside of a try block with00:20:10
a catch00:20:12
and here's the error at the end like00:20:14
this00:20:15
so now I can do console.warn00:20:18
here's my error message00:20:22
so if I tab this all in00:20:25
this will handle failing the fetch00:20:28
but the response I still need to check00:20:31
and make sure the response is okay so I00:20:33
still have to do this I still have to00:20:34
say if not response.okay00:20:38
throw new error00:20:46
and that comes down here00:20:50
so let's00:20:52
test this it should be working just fine00:20:54
yes there we go we've got everything00:20:55
working but with the try catch now we00:20:58
have some error handling00:21:00
so let's try it out with an invalid URL00:21:04
now I get the 404 error which means that00:21:08
this should trigger an error which00:21:10
should go down to the catch00:21:12
and there we are here's the response00:21:15
that's this one on line 11 and then the00:21:17
error comes down and line 16 that is our00:21:23
console.warn right here00:21:25
so this part's not running we're00:21:28
navigating to this part of our code00:21:29
because we are throwing an error and00:21:31
that jumps down to the catch00:21:33
same sort of approach just a different00:21:36
way of writing the code so we've got try00:21:38
catch instead of the fetch then then00:21:41
catch00:21:43
two different ways of doing it both work00:21:45
it's just whichever syntax00:21:48
feels more comfortable to you whichever00:21:50
one you feel is more readable they are00:21:53
both valid syntaxes00:21:55
all right so that is the end of number00:21:57
two moving on to number three00:21:59
understanding more of the parts that00:22:02
come with fetch00:22:04
so what do we mean by Parts well00:22:08
there's other objects and00:22:11
in that first simple version of the00:22:16
fetch call that we were making we were00:22:18
using all the default values so now00:22:21
we're going to start looking at some of00:22:22
those other options the other parts of00:22:25
the things that we're passing into00:22:27
effects the things that fetch is doing00:22:28
by default00:22:30
so a URL00:22:32
when you call fetch like this00:22:36
what we put inside of here could be a00:22:39
string which is what we were doing00:22:40
before something like this this is a URL00:22:43
string we can put a URL object so that's00:22:48
what we're going to build first of all00:22:49
so that's one of the things that we're00:22:51
going to look at here a URL object you00:22:54
can pass a string like this into the URL00:22:56
Constructor and it's going to give you a00:22:58
URL object00:23:00
so what's the benefit of that well00:23:04
if you had this string and you were00:23:06
using this string nothing wrong with it00:23:08
it's going to work fine with fetch but00:23:10
if you needed to get at any of the bits00:23:12
and pieces so what if I only want the00:23:14
path the folder and file name what if I00:23:17
only wanted the port number what if I00:23:19
own one to the protocol what if I wanted00:23:21
the domain what if I wanted the origin00:23:23
what if I wanted just the query string00:23:26
so there's all these other parts so the00:23:28
hash value there's all these different00:23:30
pieces that make up a URL00:23:33
yes I can use string Methods to say okay00:23:35
split it wherever there's a forward00:23:37
slash find a question mark find the00:23:40
hashtag you know there's all these00:23:42
things that we can use to extract bits00:23:44
and pieces but it's a lot more code than00:23:47
hey if I just add the property name00:23:49
that's going to work just fine00:23:52
so inside of here what I'm going to do00:23:54
is I'm going to say00:23:56
here's my URL00:23:58
create a new URL object and there's two00:24:01
ways we can write it we can just pass00:24:02
this string in which is the way that I00:24:05
typically do it but you can also split00:24:07
it into two pieces there could be a00:24:10
string00:24:11
which you can think of as being this00:24:14
part of the URL00:24:15
or the base which is this part00:24:19
so if you split it up you can have the00:24:21
base and this has two separate strings00:24:23
or just pass in the whole thing which is00:24:26
what I'm going to do right here00:24:29
there we go I have created a URL object00:24:33
console.log URL dot host URL dot origin00:24:38
URL dot protocol00:24:44
dot port00:24:46
half name00:24:48
and so on there's all these properties00:24:51
that I have up here these are all bits00:24:54
and pieces of what we have00:24:57
inside that URL00:25:03
all right oh we have to go back to our00:25:06
main page and we have to switch this00:25:09
over to number three00:25:11
we're no longer on number two00:25:14
and there we are so00:25:19
there it is there's the origin here's00:25:21
the protocol here's the port this is the00:25:23
path name which is the folder and file00:25:25
name00:25:26
this is the host so we've got all these00:25:29
different bits and pieces that we get00:25:31
for free just by wrapping the string00:25:34
inside of a URL object the fetch it's00:25:38
happy to take a string it's able to take00:25:40
a URL object it's also00:25:44
here we can just quickly throw on a then00:25:47
just to show that it works00:25:49
so my response object00:25:55
I'll just write up the status so give us00:25:57
a 20000:25:59
there it is there's the 200 status00:26:01
coming up00:26:05
so string URL to the different things00:26:08
that we can pass into a fetch the third00:26:10
one is a request object there's actually00:26:13
a request object that we can build so I00:26:15
can say cons or const00:26:18
request equals new request00:26:22
so a request object00:26:25
you can see here we can pass in a URL00:26:28
object right here and then there's an00:26:31
init property so there's an object where00:26:34
we can put a whole bunch of settings00:26:35
inside of so let's do that I'm going to00:26:37
pass in my URL00:26:40
just like fetch the request is going to00:26:42
be able to accept a string or a URL00:26:45
object00:26:47
then00:26:48
there's options so inside of here in the00:26:51
request what are things that you might00:26:53
want to put in there00:26:55
well headers00:26:57
there is a headers object a header's00:27:00
setting where I can00:27:04
set up various headers now I'm just00:27:06
going to throw one in here as a sample00:27:08
we'll come back and talk more about00:27:10
headers later on but we can put X slash00:27:15
Steve00:27:17
and the value is going to be hello there00:27:20
we go so I've created a header and I've00:27:22
put it inside of there there's different00:27:24
ways of creating it this is the most00:27:26
basic with no error handling whatsoever00:27:28
but I'm just going to throw it in there00:27:30
just to show that we can do that00:27:32
the method the default method that we00:27:36
use00:27:37
for every fetch call unless we specify00:27:40
otherwise inside the request is get now00:27:44
I will come back and talk more about00:27:45
these methods but get you can think of00:27:48
basically as read00:27:50
I want to read some data from the server00:27:53
I want to go and get a file I want to00:27:55
get an image get a Json file that's what00:27:58
git is I'm not sending any data to the00:28:00
server necessarily I just want to get00:28:02
something back00:28:04
so that's what this means00:28:06
and then once the stuff comes back what00:28:09
do I want to do with it well there is a00:28:11
property called Cash and you can set it00:28:15
to one of these values right here00:28:19
so the default if I set it as that so00:28:21
this is if I'm not putting anything in00:28:24
there means00:28:27
this00:28:28
cash first00:28:30
so I'm going to go and check in the00:28:33
browser's HTTP cache so00:28:36
every time you visit a web page the00:28:39
browser is saving00:28:41
those files that it brings and downloads00:28:44
so the HTML the CSS the JavaScript the00:28:47
images all those things are being saved00:28:49
in your browser that's the history of00:28:52
your browser it's saving all of these00:28:53
things it's caching them in an HTTP00:28:56
cache00:28:57
so this is all00:29:00
HTTP cache not to be confused with the00:29:04
cash API which is another topic which00:29:08
there's a video that I've done on that00:29:10
if you look up at the top there you'll00:29:12
find that00:29:14
so not the cache API but an HTTP cache00:29:18
in the browser00:29:20
so save it to the cache or look in the00:29:22
cache first to see if it's there00:29:24
if it's there but it's too old it's00:29:27
expired it's gone be asked gone beyond00:29:29
its best before date then we're going to00:29:31
send a request off to the server00:29:33
and if the server says it has a newer00:29:36
copy we will download it and we will00:29:39
update the cache we'll replace what's in00:29:41
the cache reload means always go to the00:29:44
cache don't bother checking the cash00:29:45
first just go to the server get the new00:29:47
one bring it back and put the new one in00:29:49
the Cache no store means always go to00:29:51
the server but don't bother updating my00:29:54
cash just get a new copy of the server00:29:56
don't save it00:29:58
no cash means00:30:01
make a request to the server and say00:30:03
Here's the current age of what I've got00:30:04
do you have a newer version00:30:07
and if it does it will send back the new00:30:10
one and we will update the cache and use00:30:13
the latest version that came back from00:30:14
the server Force cache00:30:17
if there's nothing in the cache00:30:19
make the request and then save it00:30:22
only if cash means don't bother ever00:30:26
sending a request to the server just go00:30:28
and look in the cache if it's there use00:30:30
it if not this is the error that we will00:30:33
get00:30:36
so right here we can say cash this is a00:30:40
setting for the request this is in the00:30:42
options object for the request00:30:45
and I'm going to set this to00:30:49
let's say no store00:30:52
so I'm not going to bother saving it in00:30:54
my cache00:30:56
so here I can put the string the Str00:31:00
from up here I can put the URL00:31:04
I can put my request object any of those00:31:07
are going to work00:31:09
to bring back our response there it is00:31:12
there's our 200 response00:31:15
so we should always00:31:18
however then for the data handling and00:31:20
our catch with the error00:31:22
so we will say pass it to console.warn00:31:28
so that's going to be the error message00:31:30
inside of here we will check to make00:31:33
sure it worked so if not response00:31:40
dot ok00:31:42
throw new error00:31:50
and then we want to have the data so we00:31:54
will extract the data from there by00:31:55
returning the call to response dot Json00:31:59
and I'm calling response.json because00:32:02
this is going to be a Json file it's my00:32:04
local Json file that I created00:32:07
so this is coming back00:32:10
and the data00:32:12
is going to be here and I can00:32:14
console.log the data00:32:17
so this is the JavaScript object created00:32:19
from the Json string that was inside the00:32:22
response object00:32:24
and there it is there is our Json data00:32:29
the JavaScript object00:32:31
so it is a object00:32:34
all right so that is number three00:32:37
working with these URL objects working00:32:40
with the request objects the headers00:32:42
object00:32:43
so we will come back and talk more about00:32:45
the headers object but just be aware00:32:47
that this is like settings for the00:32:50
request that are going to be00:32:52
there's some settings that happen in the00:32:54
browser some that happen on the server00:32:55
and we're going to talk more about those00:32:57
coming up00:32:58
moving on to number four00:33:02
understanding the response so00:33:05
we got a response object sure but00:33:08
there's a lot more to it than just this00:33:10
method so let's take a look at that00:33:13
so in my response00:33:18
I've got a little bit here set up00:33:20
already00:33:21
I have a bunch of examples so these are00:33:24
strings pointing to different files00:33:26
one's a Json file one's an image one's a00:33:29
font file one's an HTML file so we have00:33:32
all these different files00:33:34
we can make requests for any of those00:33:36
using fetch00:33:37
when we do the fetch we know we get back00:33:40
a response object We call we look at the00:33:43
OK property to see that it worked00:33:46
but it is also possible for us to build00:33:49
our own response objects so let's look00:33:51
at what a response object actually is00:33:56
I have an object here00:33:58
so JavaScript object plain ordinary00:34:01
JavaScript object I'm going to turn that00:34:03
into a Json string00:34:05
right here so I'm calling json.stringify00:34:09
I'm turning this into a string so we can00:34:13
do this in two steps so let's say my00:34:16
Json string00:34:18
is this00:34:24
there we go and then that string00:34:30
I'm putting it inside of an array00:34:32
and I pass it to a file Constructor so00:34:35
I'm building a brand new file00:34:38
this is what I'm going to call it00:34:40
and this is the mime type the data type00:34:43
of the file00:34:45
then I can build a new response object00:34:48
so I don't even have to go and make a00:34:51
fetch call to create a response object00:34:54
now that's the whole purpose of what00:34:56
we're learning here today is about fetch00:34:57
calls and we will look at some different00:35:00
ones here in a minute but this is what a00:35:02
respect a response object is00:35:04
it's a container that has a file inside00:35:08
of it this is the body of the response00:35:11
so every HTTP request and response it's00:35:16
basically an object so we've got this00:35:19
HTTP request object there's an HTTP00:35:23
response object that comes back from the00:35:25
server both of them are constructed the00:35:28
same way there's a head00:35:30
and a body00:35:34
both of them have these two parts to00:35:37
them there's also a footer as well but00:35:39
we never touch the footer we don't have00:35:41
to worry about it we can forget that it00:35:42
even exists and it won't affect anything00:35:44
that we do so let's just think of it as00:35:46
these two parts00:35:48
inside the head this is where all the00:35:50
settings are this is where we have those00:35:52
things like the cache setting and the00:35:54
headers the actual headers saying hey00:35:58
I'm using the get method here's the URL00:36:00
that I'm going to this is the port00:36:01
number that I'm using here's the status00:36:03
code of the response all these things00:36:06
are inside the head00:36:08
the body is the actual file that's what00:36:11
we have down here this file that we00:36:13
created that we pass into here that is00:36:16
the body00:36:17
it is possible that the response is null00:36:20
there is nothing inside of there when we00:36:22
make a get request to the server this00:36:27
is null it is empty when you make a get00:36:31
request you're not allowed to put00:36:32
anything inside the body00:36:35
the response will hopefully have00:36:38
something in the body now it's possible00:36:39
that it's empty it's no but most of the00:36:42
time you will have something inside that00:36:45
body00:36:46
so here is my body this is in my00:36:49
response object and then three settings00:36:52
three properties inside the options00:36:54
object for the response00:36:56
a status code to say hey it's good or00:36:59
it's bad00:37:00
status text it can be00:37:03
whatever you want typically if it's 20000:37:06
that means okay so you'd write something00:37:08
like that00:37:10
and then headers00:37:12
we had some headers before we had00:37:13
written out that object with the string00:37:15
inside of it here's a couple of actual00:37:18
headers00:37:19
if you're building custom headers00:37:22
like this we can come up with our own00:37:25
names00:37:27
but they have to start with the letter x00:37:31
foreign00:37:36
so there's the value here's the name if00:37:39
it starts with an X you can create00:37:41
whatever headers you want but there are00:37:43
headers that you're allowed to use and00:37:44
there's other ones that you're not00:37:46
allowed to touch you're not allowed to00:37:47
change it's only the browser that is00:37:48
allowed to set them00:37:51
here we have content type and content00:37:54
length so in my response object00:37:57
I've got this file this is the kind of00:38:00
file that it is and this is the size in00:38:02
bytes of that file00:38:04
so we can console.log this response00:38:08
object that we got back00:38:12
and there it is00:38:13
so here00:38:16
line 2000:38:19
this is the object00:38:21
right here this object here's the string00:38:24
version of it which is the contents of00:38:26
our file and then our response that we00:38:29
built00:38:30
we're taking a look at the response00:38:31
object there it is status 200 status00:38:34
text say my name and we can look to see00:38:39
what those headers are if we want so in00:38:41
our response00:38:44
we can say hey I want to look at the00:38:46
headers inside of there can you get me00:38:48
the header called00:38:51
content type00:38:54
can you get me the header called content00:38:57
length I want to take a look at those00:38:59
headers inside this response object00:39:03
there it is00:39:04
so anytime that you need to read the00:39:07
headers from a response object assuming00:39:10
you're accessing ones that you're00:39:11
allowed to access you're not allowed to00:39:13
access all of them remember that00:39:15
but assuming that they are there and00:39:17
you're allowed to access them this is00:39:19
how you do it00:39:20
response.headers.get and then the name00:39:22
of the header00:39:26
so00:39:27
dealing with00:39:31
fetch calls and these response objects00:39:34
we can do fetch calls for these let me00:39:37
just comment that one out00:39:41
so we'll just very quickly test a couple00:39:44
of these to take a look at them so I'm00:39:47
going to look for the image string00:39:52
and again I can use the string I can00:39:53
create a URL object I can create a00:39:55
request object00:39:57
then we get our response coming back we00:40:00
will check if response dot OK is not00:40:04
true00:40:08
throw new error00:40:13
and we will return from this first then00:40:17
the response dot now this is not Json00:40:23
this is an image so instead of doing00:40:26
response Dot00:40:28
Json we're going to do response dot blob00:40:32
blob stands for binary large object00:40:38
basically it means that this is a binary00:40:40
file it's not a text file this is an00:40:43
image it's a video it's a media media00:40:45
file of some sort it's a font so it's00:40:48
not text00:40:50
and inside of our next then we get a00:40:54
blob coming back00:40:59
and we'll have our catch at the very end00:41:01
and this is another way that you can00:41:03
write it00:41:05
I'm just going to write out my error00:41:07
object so if there's an error object00:41:09
passed into here it will be passed to00:41:12
this named function so warn is a00:41:16
function or a method inside the console00:41:19
object so I am passing the error object00:41:21
to that function00:41:23
so instead of writing out error.message00:41:24
it'll write out the whole error but00:41:26
that's okay00:41:28
we have here the blob and if I try to00:41:31
console log that00:41:38
there we go this is what I get Blob it00:41:41
tells me the size it tells me the type00:41:43
that's about all that it can tell me it00:41:46
can't show me the binary data but it can00:41:48
say okay it's a blob object now if I00:41:51
ever wanted to do something with that00:41:53
like put this in my page I could do that00:41:56
I can turn00:41:57
this which is basically00:42:04
a chunk of memory00:42:13
so they have now this blob that's stored00:42:16
in memory somewhere00:42:18
so we've got this chunk of data that's00:42:21
saved in memory I want to use it I want00:42:24
to put it00:42:25
here in my HTML I've got right here00:42:29
this image tag00:42:31
called pick I want to put it inside of00:42:34
there I'm going to replace this image00:42:36
with this one that I got back00:42:39
so to do that I have to create a URL00:42:42
basically I have to find a way of00:42:45
pointing to that place in memory where00:42:47
this thing is saved so I will create a00:42:51
URL using that URL object that we've00:42:54
talked about before but it has a method00:42:57
called create object URL00:43:00
we just have to pass it our blob00:43:04
I'm going to say here I've got a bunch00:43:05
of memory can you create a URL that00:43:07
points to that spot in memory for me00:43:10
then00:43:12
my image I will get a reference to that00:43:16
get element by ID pick00:43:20
and we will set the source of that equal00:43:22
to this new URL that we just created00:43:26
there it is00:43:27
now this image is a different aspect00:43:29
ratio than the one that we had here but00:43:33
this is it we have00:43:36
replaced that original here if I comment00:43:39
this one line out00:43:41
there's the original image00:43:44
run that again there it is replaced with00:43:47
the one that we fetched from the server00:43:50
so we went off00:43:53
to pick some dot photos got an image00:43:55
brought it back00:43:56
and here let's change these to match so00:43:59
we'll say 300 and 200 now it'll have the00:44:02
same aspect ratio00:44:03
there we go there's our cute little00:44:05
puppy image00:44:09
other ones work the same way so00:44:12
for a font00:44:14
we're going to get back the reference to00:44:15
the file it's going to be saved in00:44:17
memory but then I can write some CSS I00:44:20
can create a style tag and write some00:44:22
CSS that will point to the create object00:44:26
URL this URL that we create I would use00:44:28
that as the value for my source inside00:44:33
of an at font face Style00:44:36
for00:44:38
HTML when that comes back instead of00:44:40
using blob00:44:43
we could do response dot text00:44:49
that's for text files response dot Json00:44:52
we've already talked about that's for00:44:56
Json files00:44:58
this one is for text HTML and XML files00:45:03
and CSS and JavaScript00:45:07
anything that's text based00:45:09
blob is for images video audio fonts00:45:17
things like that00:45:21
all right so let's switch over to number00:45:24
five here00:45:27
and for number five what I have is00:45:31
starting code does the same thing with00:45:33
the image so we are going to pick some00:45:37
that's our fetch call00:45:39
we're going to call the blob method on00:45:43
the response object which will give us00:45:45
this blob that we can use00:45:48
with the URL create object URL method so00:45:52
it gives us a URL that points at that00:45:55
location in memory and let's just00:45:57
console log that just so we can see it00:45:59
again here00:46:02
and yep there we are00:46:05
here it is so this is the URL that we're00:46:07
looking at that is being used for this00:46:10
image00:46:11
so it's not the URL that was on the00:46:14
pixum website it's the data that came00:46:16
back that was saved in memory by our00:46:18
fetchcom00:46:20
that was turned into a URL on our vocal00:46:24
site where00:46:26
it can be used for this image00:46:29
all right now we've got two other kinds00:46:31
of data here we've got some Json data00:46:33
and some text Data as well so this is00:46:36
pointing to our00:46:37
server right here the server that I've00:46:39
got00:46:41
this is a simple get request00:46:44
we'll do this one first what I'm going00:46:46
to do is inside my header I'm going to00:46:48
add an H2 with the text that's coming00:46:51
from here00:46:52
so we've got00:46:54
fetch of text string00:46:59
we'll get our response object00:47:01
in the response object we always want to00:47:03
check to make sure00:47:06
that what came back was valid if not00:47:08
we're going to throw an error00:47:16
now this is plain text so instead of the00:47:19
Json method instead of The Blob method00:47:21
we're going to call text00:47:23
this is another method that the response00:47:25
object has actually all three of these00:47:28
text blob and Json all belong to the00:47:30
body object but the response object00:47:35
has access to that method00:47:39
so there we are recall then this will00:47:42
give us the text00:47:45
from that00:47:47
here's our catch00:47:51
if there's a problem we're right at00:47:52
there and in my header00:47:56
I'm going to say the inner HTML is going00:47:58
to be equal to itself Plus00:48:02
there we go we're adding an H2 element00:48:06
and inside of that we're going to put00:48:08
this text so I used a backtick00:48:11
characters and this is my preferred00:48:14
approach to writing new HTML Based on00:48:16
data00:48:17
if you use the backtick characters00:48:19
around your HTML string you can embed00:48:22
variables like this so This is called00:48:24
interpolation where you're sticking in00:48:26
variables inside of that00:48:29
so we are now00:48:31
getting an H2 element as well as an00:48:34
image being set by calling the text00:48:36
method we get the text to write inside00:48:38
of here by calling the blob method we00:48:41
get the raw binary data that we can then00:48:43
turn into a URL and use inside of our00:48:46
image element00:48:48
and the other one is the Json data now00:48:52
this is the most common of all the00:48:54
methods00:48:55
this is the one that you're going to be00:48:56
using the majority of the time I would00:48:58
imagine00:49:00
we've got our response object so a lot00:49:03
of the same stuff is done regardless of00:49:05
the kind of file that you're looking at00:49:09
if everything works out we always want00:49:10
to be doing our error handling so if00:49:14
everything does not work out properly00:49:16
we're going to throw an error00:49:22
so we'll have another then and we'll00:49:24
have our catch00:49:26
console.warn there we go00:49:29
and at the end of this00:49:33
this is going to be00:49:35
Json file that comes back a response00:49:38
object is going to contain the Json file00:49:40
that comes from the server00:49:42
from that Json file we want to extract00:49:47
the data so we're going to take the00:49:49
string we're going to pull the string00:49:51
out of the file and then turn it from a00:49:53
Json string into a JavaScript object and00:49:56
that's what the Json method does for us00:49:58
so we're going to call this00:50:00
response.json method which is going to00:50:02
return a promise00:50:04
the promise will then sit here in front00:50:07
of this then method so the result of00:50:09
this then will be the promise that sits00:50:12
here when it resolves so when we00:50:14
actually get the JavaScript object then00:50:18
this then method we'll call our function00:50:20
inside of here and we will have our data00:50:24
object00:50:25
or let's call it a data array because00:50:27
that's what it is that's what we're00:50:29
getting back here from this endpoint00:50:31
and if I were to open that up in the00:50:34
browser right here00:50:37
this is what we're getting back00:50:39
this is the URL it is an array that has00:50:43
10 objects inside of it every one of00:50:46
them with the same properties00:50:51
now I'm not going to use all these00:50:53
properties I'm not going to write all00:50:54
this data out to the page but I will00:50:56
take a few of these properties so just00:50:58
to demonstrate we're going to take first00:51:00
name and last name those two properties00:51:03
and we're going to take this the user ID00:51:07
so those three things00:51:09
we're going to build some HTML using00:51:11
that00:51:13
now if I jump back in here to my HTML00:51:16
file00:51:18
here is my list here's the UL element00:51:20
and inside of here what we want to build00:51:23
is something like this00:51:25
there's going to be a list item and00:51:27
inside of it00:51:28
I'm going to have their first name I'm00:51:32
going to have their last name like this00:51:34
inside of a couple paragraphs and then00:51:37
inside the list item00:51:39
this is where I want to put that uid00:51:42
you know something00:51:44
something like this not exactly this so00:51:47
let's copy this just to demonstrate00:51:50
[Music]00:51:52
it doesn't matter that I'm missing the00:51:54
first letter here00:51:55
when you want to add data into an HTML00:51:58
element00:51:59
maybe I want to be able to later on have00:52:02
somebody have a click listener added to00:52:04
the UL so when somebody clicks one of00:52:07
the list items I can look to the uid00:52:09
value and know which one that was00:52:12
clicked so if I have to then go back and00:52:15
reference that original data I can find00:52:17
a match00:52:20
the problem is we're not allowed to do00:52:22
this we're not allowed to invent our own00:52:24
properties I can't create a property00:52:26
called that and stick it into the HTML00:52:29
I can technically write it yes I just00:52:32
did but it's not valid HTML00:52:35
if you want to add your own custom00:52:38
properties like a user ID00:52:41
you have to do this you have to add the00:52:44
data prefix in front of it so data00:52:47
hyphen and then the name that you want00:52:50
to make up00:52:52
so now we have this00:52:54
attribute called data uid that I can00:52:57
access from my HTML I can create it when00:53:01
I'm generating this HTML and I can00:53:03
access it later with a click listener00:53:06
okay so we have all this this is00:53:09
effectively what I want to create00:53:12
so I'm going to copy that I'm going to00:53:14
comment that out00:53:16
now there are many ways that you can00:53:19
create00:53:20
the content inside there we can call00:53:23
create element create document fragment00:53:25
there's a whole bunch of different00:53:26
things that you can do to actually00:53:28
create the content my preferred approach00:53:31
is this00:53:33
here's my UL this is the list variable00:53:37
so list Dot innerhtml00:53:42
now we did this for the header right00:53:44
here we said just add to it here I'm not00:53:47
adding to it I'm replacing whatever's00:53:49
inside there with new content00:53:52
we're going to take our data array00:53:54
and then we're going to call the map00:53:56
method the array map method allows you00:53:59
to Loop through an array00:54:01
what it does is it returns a brand new00:54:04
array so I'm going to take an array of00:54:07
objects and turn it into an array of00:54:09
strings00:54:11
these strings are each going to be a00:54:14
piece of HTML so there's going to be one00:54:16
piece of HTML for each one of the00:54:18
objects that we're getting from this00:54:20
server so this object will have a piece00:54:23
of HTML that represents it00:54:25
and that's what we had as our demo00:54:29
here this we're going to generate one of00:54:32
these for each one of those objects in00:54:34
this array00:54:36
now I can't take an array and assign it00:54:39
to enter HTML because it's just going to00:54:41
say object array or object object that's00:54:45
pretty useless so I'm going to take this00:54:47
array and I'm going to combine every one00:54:50
of those00:54:51
strings into a single string I'm going00:54:54
to join them all together as one big00:54:55
string that gets assigned here inside of00:54:59
here we've got our item00:55:03
and we're going to return and I'm going00:55:06
to put backtick characters around it the00:55:08
same as I did down here so I can put00:55:10
variables inside of it00:55:14
I want to build this is the HTML that I00:55:16
wanted to build00:55:17
so in here instead of this it's going to00:55:21
be00:55:22
item Dot uid00:55:25
so item was my variable item.uid and00:55:29
right here it's going to be item DOT00:55:33
first underscore name00:55:37
and this one's going to be00:55:39
item dot last underscore name00:55:44
there we have it so that will work that00:55:47
will generate it00:55:49
there we go there's all of our data and00:55:51
if we inspect one of these we can see00:55:54
hey look there's all the unique IDs as00:55:58
well so we have all that data coming out00:56:01
now if I wanted to add a class name00:56:03
that's easy enough to do I can add00:56:07
something like that there we go now I've00:56:10
got some CSS I can tie you into my CSS00:56:12
file very easy to do00:56:14
there's one thing I can do to simplify00:56:16
this a little bit00:56:18
and that is here instead of putting a00:56:21
variable item that I then have to access00:56:24
the properties there's only three00:56:26
properties that I want00:56:27
in the actual data there's lots of00:56:30
properties that I don't care about00:56:32
I only want those three so I'm going to00:56:35
use destructuring instead of putting00:56:37
item00:56:39
I'm going to do this this is the object00:56:42
and the things that I want from the00:56:45
object are the uid the first name and00:56:49
the last name those three properties are00:56:52
all that I care about so I'm00:56:54
destructuring the object to get those00:56:57
three things and that means down here I00:57:01
don't have to put item in front of each00:57:03
one of them00:57:04
this becomes much easier for myself and00:57:09
other developers to read so I can see00:57:11
here's this nice chunk of HTML there's00:57:14
three variables the uid the first name00:57:16
the last name those properties were well00:57:19
named in the data so why not use those00:57:21
same names here00:57:24
and there we have it we've got the data00:57:26
being built00:57:29
and one of the most important things00:57:31
about this approach is that we have one00:57:35
command all this HTML is being added at00:57:39
the same time we're not coming in here00:57:42
and inside the loop saying inner HTML is00:57:46
equal to what it was plus this new value00:57:48
and doing this again and again and again00:57:51
forcing the browser to redraw the page00:57:53
with every single element that we add00:57:56
one after another redraw the page redraw00:57:59
the page redraw the page we don't want00:58:01
to do that we want to minimize the00:58:03
number of times that the browser is00:58:05
forced to rebuild the page because we're00:58:07
changing the content00:58:09
here I'm changing it once I'm building00:58:13
one big string and saying here add this00:58:16
data so one time it changes the Dom and00:58:20
it redraws the screen00:58:22
all right and so now that's the end of00:58:25
number five number six let's move on to00:58:27
authorization and credentials00:58:31
let me come down here and00:58:34
move on to that00:58:38
we are moving on to number six00:58:42
all right00:58:44
so talking about API Keys now00:58:47
what is an API Key Well API stands for00:58:51
application programming interface00:58:54
basically00:58:55
in the context of fetch what we're00:58:57
talking about is00:58:59
a web server somewhere that can provide00:59:02
you with files it can provide you with00:59:04
Json files or HTML files or XML files00:59:08
and this data will be sent to you00:59:11
depending on what URL you use so which00:59:15
endpoint00:59:16
is what the URLs are called so the00:59:18
different URLs are different endpoints00:59:20
and for you to be allowed to access the00:59:25
data many apis most apis will require00:59:28
you to have a key so you have to00:59:30
register with them and they will give00:59:32
you a key it's just a unique identifier00:59:35
that says you are the person who's00:59:38
requesting this data and by doing that00:59:40
they can keep track of how many requests00:59:43
you're making which endpoints you're00:59:44
requesting if you're allowed to access00:59:46
certain endpoints or how many times00:59:48
you're allowed to access those different00:59:50
endpoints00:59:51
so API Keys once you've registered and00:59:55
you have this key it's something that00:59:57
you want to keep Secret00:59:59
most of the time when you're building a01:00:02
website what you'll want to do is you'll01:00:04
want to be making these fetch calls from01:00:07
the web server and by doing it on the01:00:10
web server you can put the API key into01:00:12
an environment variable so it's a01:00:15
variable that's not written inside your01:00:16
code01:00:18
now there are some01:00:21
like uh Google Firebase where they will01:00:25
have multiple keys that you're using and01:00:28
one of them is intended to be used in01:00:30
the browser so it's okay to have it in01:00:32
your code because there's other keys01:00:35
that are on the server and it's the01:00:36
combination of these Keys that's going01:00:38
to work to allow people to have access01:00:40
so it doesn't matter if somebody gets01:00:42
the key that you put in the browser they01:00:45
still don't have your server side key01:00:47
so in this example we're just going to01:00:50
be talking about those instances where01:00:52
in the browser01:00:53
you have this key and you're going to01:00:55
have it in your client-side code01:00:58
so where can we put it so different01:01:01
places that we can put it01:01:03
the keys01:01:04
can go in the query string01:01:08
they can be in the headers01:01:10
those are probably the two most common01:01:12
but also in cookies01:01:15
now cookies I'm listing here is a01:01:17
separate thing but really cookie is a01:01:20
header inside the headers there is one01:01:23
called set cookie or set cookie two01:01:27
and these headers will contain01:01:30
or can contain the API key they can01:01:33
contain lots of little bits of text01:01:35
information identifiers session IDs01:01:38
things like that can be inside these01:01:40
cookies01:01:41
so these are different places that we01:01:44
can put them to send them to the server01:01:47
when we make a fetch call we're going to01:01:49
be placing them in different places01:01:53
so when I make my fetch call I want to01:01:56
use a request object because it's going01:01:59
to let me access all these different01:02:02
things so we can create a URL01:02:07
so here's my string we'll do something01:02:10
like the one from Json placeholder01:02:15
actually let's use the one that I've got01:02:17
up and running here01:02:19
so we've got01:02:21
This Server01:02:24
this is a very very basic simple01:02:27
Express node.js server01:02:31
I've got get post put patch delete these01:02:36
endpoints are set up here now these01:02:38
endpoints are01:02:40
the http01:02:42
methods so get remember was the default01:02:47
get means I'm just getting some data I'm01:02:50
requesting some data post is I'm01:02:54
uploading something I'm creating a new01:02:56
thing on the server01:02:58
put and Patch are both for I'm updating01:03:01
something put is I'm replacing the old01:03:04
thing patch is I'm changing part of the01:03:06
thing that's on the server delete01:03:08
straightforward you're deleting01:03:10
something on the server01:03:11
so I'm just creating these different01:03:13
endpoints so that I can use it to upload01:03:16
files and do things so I'm going to use01:03:18
this as my endpoint and I'm listening on01:03:21
Port 3000 so basically what I'm doing is01:03:25
I'm going to http colon slash 1270001:03:31
one colon 3 00001:03:36
this is the end point that I'm using for01:03:38
get and post for these other threes I01:03:41
would have to add something afterwards01:03:43
and whatever this value is would be01:03:45
represented by this variable ID01:03:48
okay01:03:50
um when you take this just make sure01:03:52
that you have it in a separate server01:03:54
in the terminal you would navigate into01:03:57
this01:03:58
folder so you will do this you'll say CD01:04:01
into server01:04:04
once you've got a copy of this whole01:04:05
project01:04:07
and then you want to do npm install01:04:09
which will install Express and cores01:04:12
these two things that are being used and01:04:14
then to start it01:04:16
you just have to say node Main01:04:20
and that will run the server so that's01:04:23
what I have done here and if we open up01:04:26
my terminal you can see I read node Main01:04:28
and it is listening on Port 3000 so this01:04:31
is actually running right now this01:04:32
server it's been running the whole time01:04:34
I've been recording this01:04:36
so this is my endpoint01:04:39
that I'm going to be calling from here01:04:43
foreign01:04:44
so we do this then we can say I'm going01:04:47
to create a URL from that01:04:54
we pass in our string01:04:56
and then in the request object01:05:01
the first thing that we pass in is a URL01:05:03
and then an options object01:05:09
equals new requests there we go so we're01:05:12
creating a URL object and a request01:05:14
object01:05:15
now the other things that we haven't01:05:17
really talked about in here01:05:19
the query string01:05:25
question mark is the start of it and you01:05:28
can think of these as just like01:05:30
variables so there's a name and a value01:05:32
so here's the name of the variable01:05:34
here's the value of the variable01:05:36
and01:05:37
you can create as many of these as you01:05:39
want01:05:40
like that01:05:41
so name name value value you separate01:05:45
them with ampersands01:05:47
this whole thing is the string value01:05:50
inside of here the sorry the search01:05:52
value inside my URL object URL01:05:57
dot search will be that string01:06:01
or there is a URL search params object01:06:08
so we can access that property01:06:12
so let's say SP is my search params01:06:15
object it's going to be URL dot search01:06:17
params so this is an actual search01:06:20
params object we can access the values01:06:23
we can add new values we can say01:06:25
sp.append01:06:31
so this is a much quicker and easier way01:06:35
to work with01:06:37
all these values instead of having to01:06:39
work with them as a string01:06:42
so if we're talking about an API key01:06:44
like we were talking about earlier then01:06:46
with the API key we could add it like01:06:49
this we could say append01:06:51
API key01:06:53
and then the value is whatever that API01:06:56
keystring is so I've added my API key01:07:00
into the query stream so in my server01:07:05
in this get or poster whatever the01:07:07
request is if inside of here in the01:07:10
request object it is looking for01:07:12
something in the query string called API01:07:14
Dash key01:07:16
like this01:07:17
or01:07:19
X API key or whatever it's called if01:07:22
it's looking for something then this is01:07:24
the way we have to add it in01:07:27
now if it's not looking for it in the01:07:29
query string maybe it's looking for it01:07:31
in the headers01:07:33
so we could have01:07:35
here let's say we'll set our method to01:07:39
get01:07:41
and our headers01:07:45
could do this again like we did before01:07:47
just an object literal where we write01:07:49
out all the values01:07:51
or01:07:52
the better way to do this it's a little01:07:55
bit more long-winded but the better way01:07:57
to do it I'm going to create a variable01:07:59
called H which will be my header's01:08:00
object01:08:01
so H is new headers01:08:05
so why do I do this01:08:07
well I'm going to do append like I did01:08:10
here so H dot append and we can set you01:08:14
know content type and so on all those01:08:16
headers if I was uploading a file then I01:08:19
would add content type01:08:24
if I was uploading if I'm doing a post01:08:26
and I'm uploading a Json file I would01:08:28
add this header I'm not doing that I'm01:08:32
just making a a get request to the01:08:34
server01:08:36
but inside the headers01:08:39
if I was to01:08:42
do this01:08:45
the headers object is actually going to01:08:47
do some testing and checking to make01:08:49
sure that we've got some valid headers01:08:51
we're not making up things or trying to01:08:54
change once more importantly trying to01:08:56
change ones that we're not allowed to01:08:58
change01:08:59
like the origin01:09:01
this is01:09:03
a header that is set by the browser we01:09:07
in JavaScript are not allowed to change01:09:09
the origin so we're running right now on01:09:13
this origin HTTP01:09:16
127001 Port 5500 that is our origin01:09:20
that's where our server is01:09:23
we're not allowed to change it to01:09:25
something else I can't say that oh yeah01:09:28
I'm actually coming from https cia.org01:09:33
I'm not allowed to do that the browser01:09:36
won't let me do that it's going to check01:09:38
these headers and say no no this is not01:09:40
a valid one you're not allowed to use01:09:42
this so that's the most important reason01:09:45
why we do this so we add the headers01:09:48
object in here01:09:49
but we can set up whatever headers we01:09:52
want01:09:53
so maybe there's going to be01:09:57
one for the API key that we call X API01:10:01
key so remember if you're creating01:10:03
headers yourself if you're making up the01:10:05
names the headers have to start with an01:10:08
x01:10:09
just like in the HTML when you're adding01:10:11
your own attributes they have to start01:10:13
with data and Ivan in the headers you've01:10:16
got to start with X and then the name01:10:20
so here's my key right here so this is01:10:24
the key that I'm passing up so maybe you01:10:27
need it in the query string maybe you01:10:28
need it in here in this header one that01:10:31
you make up or there is another one01:10:35
called authorization01:10:39
and this one01:10:42
is like this01:10:48
this is how you would send a Json web01:10:52
token so this is a very common type of01:10:55
authorization that you would get from01:10:57
the server so they create on the server01:11:01
a Json web token01:11:04
it's a base64 encoded string that01:11:07
contains01:11:10
encoded information like your user ID01:11:13
and this string is sent and then on01:11:16
every subsequent request you're supposed01:11:18
to send this to the server so using the01:11:21
built-in header called authorization01:11:24
the word Bearer and your JWT token01:11:29
like this01:11:31
so this is01:11:33
an API key01:11:34
and this one would be your JavaScript01:11:37
web token or sorry not JavaScript Json01:11:40
web token so we have this token01:11:45
with the word Bearer and a space between01:11:47
them01:11:48
goes inside of here so01:11:50
different ways that we can send this01:11:51
information off to the server part of01:11:53
the query string01:11:54
in a custom header01:11:56
or in the authorization header it's01:11:59
possible that the API key they want it01:12:02
sent like this01:12:03
but whatever the reason whatever the01:12:06
method whatever the approach01:12:08
we just add the headers in here like01:12:10
this01:12:11
foreign01:12:12
now depending on what headers you're01:12:15
setting it is important to be aware that01:12:19
there are01:12:20
forbidden header names there are certain01:12:24
headers that you're allowed to set in a01:12:26
request there's certain headers you're01:12:28
allowed to set in a response there's too01:12:30
many to go through and list them all but01:12:32
if you go on to the Mozilla developer01:12:34
Network website and you search for01:12:36
forbidden header names you will find the01:12:39
list of all the different names that01:12:40
you're allowed to use ones that you're01:12:42
not allowed to set through JavaScript01:12:44
ones that you are allowed to set ones01:12:46
that you're allowed to set in requests01:12:48
and ones that you're allowed to send in01:12:49
responses there's not a lot for the01:12:51
responses but01:12:53
this is what we do so we create our01:12:56
request object01:12:58
with the URL that includes the search01:12:59
params01:13:01
we set our method we add the headers and01:13:04
then we can do our Fetch01:13:06
and we do our then and then and catch01:13:14
response01:13:16
we check01:13:23
let's try a set of parentheses there01:13:27
return response01:13:30
now I know my01:13:33
API right here it's just going to be01:13:35
returning text each time01:13:43
there we go we'll just write out what01:13:45
the text is01:13:47
and here's our page and there it is01:13:49
that's the text that's coming back this01:13:51
hello world that is what we're sending01:13:54
right here01:13:56
if we changed our method if we changed01:13:58
our approach01:14:01
our method from get to post01:14:06
the message changes so we did do a post01:14:09
request and then that is the end point01:14:13
that responded on the server so post01:14:16
this is the message that we get back and01:14:18
the status code is a 201 and if we want01:14:21
to see that we can go over to the01:14:23
network tab without even console logging01:14:25
it if we just come over here01:14:27
there it is there's the 20401:14:29
that we did for the01:14:31
the pre-flight request now cores will be01:14:35
getting into shortly that's what this01:14:37
one is this PreFlight request that's01:14:39
because we're requesting something on a01:14:41
different origin we're on Port 550001:14:44
we're making a request to Port 3000 so01:14:47
there are different Origins so this is a01:14:50
test to see if we're allowed to do this01:14:52
and then 201 that's the response code01:14:55
for a successful01:14:56
post request01:14:58
if we change this back to get01:15:01
that 20401:15:05
that's going to be gone there is no 20401:15:08
for a get01:15:11
oh sorry yes we are still01:15:13
dealing with a a different origin so yes01:15:15
we're going to get that but the 200 code01:15:17
that's the one instead of 201 we're01:15:19
getting a 200. the 200 is for the get01:15:22
201 was for a post okay01:15:26
so that is01:15:28
uh dealing with API Keys setting up the01:15:31
credentials cookies01:15:33
in JavaScript if you need to set a01:15:35
cookie01:15:37
you are setting the cookie01:15:39
for the domain that you're currently on01:15:41
so this script01:15:43
is being loaded by this HTML file which01:15:46
is on this origin01:15:48
so if I call the command inside of here01:15:50
if I say document.cookie01:15:55
and I set my cookie with all the various01:15:58
values01:16:02
I'm going to be setting it on this01:16:05
origin I'm not going to be setting It On01:16:07
the Origin where my server is with the01:16:10
port 3000 it's like they're two01:16:12
different computers and01:16:15
cookies are not meant to be shared01:16:18
they're really meant to stay with the01:16:21
origin that created them01:16:24
so if I want to be able to do this if I01:16:26
want to be able to send the cookie to01:16:29
the other place then what I have to do01:16:32
is I have to modify my request in the01:16:36
options here we talked about having the01:16:38
cash one01:16:40
and we set let's say it's set to default01:16:45
another one that we can set is called01:16:47
credentials01:16:49
now credentials01:16:51
can be set to omit01:16:53
and that means if01:16:56
when I send the request I don't want to01:16:59
include01:17:00
authorization header or I don't want to01:17:03
include tokens that have been set from01:17:06
other places I don't want to include01:17:07
cookies that have been set for other01:17:08
places I want to make sure that I never01:17:11
send with this request with this fetch01:17:14
call I'm never sending this information01:17:18
it could be private information so I01:17:20
don't want to send that stuff01:17:22
with01:17:25
this one we can say same origin01:17:29
which is01:17:30
the default policy for cookies it's the01:17:34
default policy for fetch calls if01:17:37
I'm on abc.com and I'm making a fetch01:17:40
call to abc.com01:17:42
that is the same origin01:17:45
and if I'm doing a request to the same01:17:47
origin the browser says okay I assume01:17:50
that you trust yourself and that you're01:17:52
not going to be sharing bad information01:17:53
you're not going to be requesting things01:17:56
that you're not supposed to request it's01:17:57
on the same origin so go ahead and01:18:00
request whatever it is that you want to01:18:01
request make the fetch to whatever01:18:03
resource you want01:18:05
but01:18:07
if you're making01:18:09
a request to a different origin and this01:18:12
is set to same origin01:18:14
well01:18:18
that's01:18:22
that's automatically going to say01:18:24
cookies cannot be sent there's no01:18:26
cookies that are going to be sent along01:18:27
with this01:18:28
so we can set it to omit01:18:30
meaning I never want to send it01:18:32
I can set it to same origin meaning if01:18:34
I'm making a fetch call to the same01:18:36
origin yeah you can go ahead but if I'm01:18:38
making it to a different origin don't01:18:40
send them or we can change this and say01:18:43
include01:18:45
go ahead send the credentials I don't01:18:47
care if it's a different origin01:18:50
and then01:18:51
we get this01:18:53
this is the browser telling me you're01:18:55
doing something that's not really secure01:18:58
you are passing around credentials01:19:01
you're doing something that you really01:19:02
shouldn't be doing01:19:04
so to protect you to protect your users01:19:08
we're gonna lock down01:19:10
the fetch calls that you're making we're01:19:12
not going to let you handle the data01:19:15
um01:19:16
there's a header here Access Control01:19:20
allow origin if I go over to the network01:19:22
tab01:19:24
inside of here in the headers01:19:28
in the response headers01:19:31
sorry for this one01:19:35
Access Control allow origin it's set to01:19:38
an asterisk it's set to a star meaning01:19:40
yeah yeah anybody's good01:19:43
and this was something that's being sent01:19:45
back actually by01:19:46
our server right here I'm just saying01:19:50
yeah yeah let anybody do anything we're01:19:51
just going to send the Wild Card01:19:52
character back01:19:54
and because we did that we're saying01:19:57
everybody's allowed to get access the01:19:59
data01:20:00
but the browser's saying okay you said01:20:03
to include credentials you're saying01:20:07
it's fine to go ahead and send01:20:09
tokens and cookies and all that stuff01:20:12
off to this other server01:20:15
and the server saying it's allowing01:20:17
anybody so basically nobody's doing01:20:20
anything that's secure so I don't trust01:20:24
what's going on right here I'm not going01:20:26
to let you actually take the data and do01:20:29
anything with it01:20:30
go ahead make the fetch call but I'm not01:20:32
going to let you touch this data because01:20:34
things just do not feel safe to me01:20:36
that's sort of the idea behind course01:20:38
and we're going to come back and talk a01:20:39
little bit more about that in01:20:42
step number eight01:20:44
all right so for right now01:20:47
let's jump back into here01:20:49
we know that include is not going to01:20:51
work with our settings01:20:53
so we're going to set credentials to01:20:56
omit01:20:57
now doing this or doing same origin01:21:00
either one of those01:21:02
that's safe that's fine you're saying if01:21:05
it's going someplace else don't send my01:21:07
cookies if I'm on something that I01:21:09
control01:21:10
go ahead we're good to do that01:21:14
and one last thing that I want to talk01:21:17
about here before we go on to number01:21:18
seven and uploading data is the content01:21:20
security policy01:21:22
in your HTML files01:21:25
you can add a meta tag01:21:29
with HTTP equivalent set to content01:21:32
security policy01:21:33
and what you do inside of here in this01:21:36
string for the content01:21:39
you define what01:21:43
the browser is allowed to do where it's01:21:45
allowed to get its resources from so my01:21:49
default is the fallback for absolutely01:21:51
everything now normally you wouldn't put01:21:53
an asterisk here and say yeah okay you01:21:55
can get anything from anywhere I don't01:21:57
care01:21:58
that's not very safe I do it here just01:22:01
to avoid some01:22:03
having to write the full thing out my01:22:05
scripts can come from the same origin as01:22:08
my HTML or unsafe inline I had to01:22:11
include this one because the live server01:22:14
script that vs code injects to run this01:22:16
server on Port 5500 needs this one01:22:20
but this is the reason why I bring this01:22:23
up01:22:24
connect source01:22:26
when you were doing fetch calls this is01:22:29
the one that you are going to be using01:22:32
connect source is where are you allowed01:22:35
to make fetch calls to01:22:37
it doesn't matter if you're requesting01:22:39
an image file a CSS file a font file an01:22:42
HTML file an XML file it doesn't matter01:22:44
the kind of file if you're doing fetch01:22:47
connect source is what you're going to01:22:50
have to set01:22:52
so each of these values default Source01:22:54
script Source connect Source image01:22:56
source style source01:22:58
font source01:23:02
there's a whole bunch more01:23:04
all these different sources it's just a01:23:06
space separated list of places that01:23:10
you're allowed to get stuff so I could01:23:11
say okay inside of here if I'm01:23:15
connecting to something that is on the01:23:17
same01:23:18
domain go ahead that's fine or if I'm01:23:21
using https to request from anywhere or01:23:25
if I'm requesting something from01:23:27
example.com that's fine I can do that or01:23:30
I can write out a full thing https01:23:33
Json placeholder01:23:36
Dot typeyouco.com01:23:39
and so on and so on just a space01:23:42
separated list of all the different01:23:45
places that you say it's fine to do01:23:48
fetch calls to01:23:49
this is a space sacred list of all the01:23:52
different ways that you can get images01:23:54
or scripts and so on so content security01:23:58
policy01:23:59
we can add it to our HTML files as a01:24:02
meta tag or it is a header so this01:24:07
is the name of the header and this is01:24:11
the value of the header so in a response01:24:14
header for the HTML file we could have01:24:17
this be read as a header01:24:21
all right and so that is the end of01:24:22
number six moving on to number seven01:24:25
getting into uploading data so let's01:24:31
comment01:24:33
this one out uncomment this one moving01:24:36
into number seven uploading01:24:42
these three methods for http01:24:46
post patch and put these three methods01:24:50
are the ways that you can actually01:24:52
upload data to the server now when you01:24:54
upload data it could be a Json file it01:24:57
could be a string it could be a01:24:59
JavaScript object that you do Json01:25:01
stringify on to add it into the body of01:25:05
your request that's being sent to the01:25:07
server or you can attach one or more01:25:10
files01:25:12
so this is going to be my method that01:25:14
I'm going to use here's my endpoint and01:25:17
this is why I have this server set up01:25:19
here is so this is the place where I can01:25:21
do it01:25:22
we've got our01:25:25
image Pickers or sorry our file Pickers01:25:27
for images and Json01:25:30
that's these things right here01:25:33
oh I'm going to clear up the content01:25:36
security policy here01:25:44
yes we have to01:25:46
change this one set data is the method01:25:48
that we're calling there we go01:25:51
okay so yes01:25:54
now we're back into our script right01:25:56
here01:25:58
and the name of our form inside of here01:26:03
that's my form we'll give it the same ID01:26:05
as well my form01:26:09
so get element by ID I can Target my01:26:11
form using that or01:26:15
document.forms.iform is another way that01:26:18
you can access this form01:26:20
we're listening for the submit event on01:26:23
the form01:26:24
when the form is submitted by default it01:26:28
wants to be sent to01:26:31
whatever you have as the action here so01:26:34
I can do this01:26:39
this is where I want to send this form I01:26:42
want to when I click the submit button01:26:44
this is where I want to send it01:26:47
so we should add a submit button here01:26:49
actually01:26:58
all right so we have a button when I01:27:01
click this button the form wants to01:27:03
submit01:27:06
here I'm finding the form and I'm01:27:09
listening for the submit event and I'm01:27:10
saying prevent default so forms what do01:27:14
they want to do by default they want to01:27:15
submit they want to send their data to01:27:17
someplace else get a result and then01:27:19
replace the current page the browser01:27:21
will replace your current page with01:27:23
whatever the server sent back from01:27:25
submitting the form01:27:27
I don't want to do that I want to call a01:27:29
fetch I want to decide for myself01:27:33
I want to send some data here that's01:27:35
what I want to do so01:27:37
I listened for submit and I say don't do01:27:40
the default thing don't actually try to01:27:42
load a new page don't send the data to01:27:44
what the action is I'm going to tell you01:27:46
what to do01:27:48
so we could right here create a01:27:52
JavaScript01:27:54
object01:28:01
[Music]01:28:02
there's a JavaScript object01:28:04
and then we can say our Json string01:28:09
is going to be01:28:11
json.stringify our object now this can01:28:15
be the data that we're going to send to01:28:17
this endpoint01:28:19
let's create a request here01:28:28
foreign01:28:31
[Music]01:28:33
so we're going to submit stuff to here01:28:35
with fetch01:28:37
and the method that we're going to use01:28:40
to be able to upload data I can't use01:28:43
get and upload data other than putting01:28:45
it in the query string01:28:47
so01:28:49
this is what we're going to do we're01:28:50
going to do a post so this is an insert01:28:52
we're adding new data I want to create a01:28:54
new thing on the server01:28:57
there's that and now because I have01:29:01
something01:29:02
right here I can take this string01:29:07
a request01:29:10
of type post01:29:11
has a body and this body can be a string01:29:16
it can be01:29:18
a form data object which is what we're01:29:20
going to use to upload files01:29:22
or it can be some sort of iterable01:29:24
object01:29:26
most of the time it's going to be form01:29:27
data or01:29:31
a string like this01:29:34
now because this is a Json string01:29:40
I should in my headers01:29:45
set a content type01:29:47
to let the server know01:29:49
this text that I'm sending you is a Json01:29:52
string so01:29:55
content type it's one of those headers01:29:57
that you are allowed to set in a request01:29:59
or a response in the request01:30:03
the content type is what you are01:30:06
uploading it's not what you're01:30:07
requesting back01:30:09
remember this endpoint is going to give01:30:11
me that string just hello world01:30:14
right here this hello world string is01:30:16
what's going to come back or sorry from01:30:17
post it's going to be thanks for adding01:30:19
something it's this string it's text01:30:21
that's coming back I'm not getting Json01:30:24
back I'm uploading Json so that's what01:30:27
the content type inside of a request is01:30:30
for it's what are you uploading01:30:34
all right so there's our request and now01:30:37
we can do our fetch01:30:43
we're getting text back from the server01:30:45
so that is going to be the method that01:30:48
we call01:30:50
the response.txt01:30:56
there we are01:30:57
so we're uploading01:31:00
this object to the server we're taking01:31:02
the object we're turning it into a Json01:31:04
string it becomes the body and this is01:31:08
how you upload any data so when I click01:31:11
Send01:31:12
this is the response that we get back01:31:14
from the server we've basically uploaded01:31:19
this object right here to the server it01:31:21
said thanks send us back a response with01:31:24
a 201 status code01:31:26
because it was a post01:31:29
right here 201 status code01:31:34
all right now files if you want to01:31:37
upload files instead01:31:40
we can right here in the body instead of01:31:44
the Json string01:31:47
I'm going to create01:31:50
a01:31:51
form data object so let's create a01:31:54
variable right here let FD equal new01:31:57
form data01:32:00
now I can create it like this and then01:32:02
start calling append01:32:04
the same way we did with headers the01:32:07
same way you can with URL search params01:32:09
the query string parts01:32:10
but inside of here we've got name and01:32:13
value01:32:14
like normal but you can also have a file01:32:18
so you could have a name which is a01:32:20
label01:32:21
and then an actual file object01:32:26
and then there's an optional third01:32:27
parameter which is the name for the file01:32:29
like what do you want to call this file01:32:31
so it's a Json file it's an image it's a01:32:35
XML file PDF whatever it is so you can01:32:39
come up with the file name that you want01:32:40
to use when uploading it this is the01:32:42
label so it's the variable that01:32:45
references the file or the string01:32:48
and we can absolutely do that01:32:51
we can come in here we can say all right01:32:54
I want to get the file that's inside of01:32:56
here01:32:58
so let's come down here and image input01:33:03
Dot01:33:05
value let's console log that01:33:12
uh here we'll put this back to the way01:33:14
it was just so we don't get an error01:33:18
okay so I'm going to pick an image file01:33:22
there's this image and when I send01:33:27
there we go01:33:29
this01:33:31
is my image01:33:35
now if I jump back into my code here and01:33:39
instead of value which is what you would01:33:42
normally do for a text input we can01:33:44
access a property called files this is01:33:48
an array of all the files that were01:33:50
included so in a browser when you go01:33:53
choose file01:33:54
if in the input element you add the01:33:56
attribute multiple it means that you're01:33:59
allowed to select multiple files at the01:34:01
same time01:34:03
but I don't have that so I can only01:34:06
select one01:34:08
this is still going to be an array but01:34:10
if I access number zero inside that01:34:13
array that is going to be this one file01:34:18
and it is a file object just like the01:34:22
one that we created back when we were01:34:23
creating our own custom response objects01:34:26
back in step three I think it was or01:34:28
step four where we were creating a01:34:29
response object we built a file and we01:34:32
put that inside there01:34:33
here is a file object coming from01:34:37
our own computer so here's the name of01:34:40
the file the type the size01:34:42
so we have all this information that we01:34:44
can get to about this file object01:34:48
I can then01:34:49
put this inside of here so we can say in01:34:53
my form data I want to append01:34:57
image file that's the name I'm going to01:34:59
use and then image input dot files01:35:04
number zero01:35:07
that's the file object and then what do01:35:09
you want to call it well I'm going to01:35:11
call it whatever it was called on my01:35:12
computer I could come up with a01:35:13
different name but I'm just going to do01:35:15
this files0 dot name01:35:19
there we go I have created a form data01:35:22
object and I've put the file into the01:35:24
form data object01:35:25
and then the body right here01:35:29
is going to be just this it's just the01:35:32
form data object that's the body that01:35:34
I'm uploading and content type is no01:35:37
longer going to be this01:35:41
it's actually going to be multi-part01:35:45
slash form data01:35:49
yes there's an image and the image has a01:35:52
type but01:35:54
it's all bundled inside of a form data01:35:56
object this is what we're uploading so01:35:59
this is the type of this01:36:02
so I pick a file01:36:04
there it is01:36:06
I send there we go here's my response01:36:09
back from the server I've actually just01:36:11
uploaded that file and if I look in the01:36:13
network tab I'll see the payload was01:36:16
actually a file that got uploaded01:36:19
all right so that's one object now there01:36:22
is another way that we can do this01:36:26
and that is01:36:28
here in the form data object when you01:36:30
create it you can actually01:36:34
just pass in the form01:36:37
so I could manually pick all the files01:36:40
that were being loaded and append each01:36:43
one of them into my form data object but01:36:46
if you pass in your form01:36:50
it's able to go and read through your01:36:52
form01:36:53
and every element that has a name01:36:55
attribute it has to be the name it's not01:36:57
going to work with just ID you have to01:36:59
have the name attribute01:37:01
but anything with a name will01:37:04
automatically get added as long as it's01:37:06
cut a value will automatically be added01:37:08
into this form data object01:37:11
so now I'm actually going to upload01:37:13
multiple files because I said yeah01:37:16
everything inside my form01:37:18
the body is going to be that01:37:21
and that's what this multi-part stands01:37:23
for is you're able to upload multiple01:37:26
objects01:37:27
so I'm going to upload a Json file01:37:31
and I'm going to upload an image file01:37:34
there we go I've got the two different01:37:35
files and you notice when I do this how01:37:39
everything else is grayed out except for01:37:41
the image01:37:42
that's because in my HTML01:37:45
I added these accept attributes so any01:37:48
kind of image or only Json files01:37:52
so when I send01:37:55
there we go now let's take a look at the01:37:57
network tab to see what happened here01:38:00
in the network tab01:38:02
here is the fetch request the post01:38:07
inside of here01:38:10
there's my general things there's the01:38:12
201 status code coming back there's01:38:14
where I was sending it to Port 300001:38:18
my response came back it was some text01:38:23
my request01:38:26
content type multi-part form data01:38:29
content length that's for all the files01:38:31
not just the one but that's all the01:38:33
files the payload that's when I was01:38:35
uploading01:38:36
so when you are uploading multiple01:38:38
things when your content type01:38:40
right here is set to multi-part01:38:44
this is what happens these boundaries01:38:46
get created so these are this is a01:38:48
string that will be repeated at the01:38:50
beginning of every single piece so I had01:38:55
a Json file01:38:57
content type was application Json then I01:39:00
had an image file was this01:39:03
and then there was nothing else this is01:39:05
the end of the whole thing so there's01:39:08
these boundaries and it puts together01:39:11
the whole payload to be uploaded01:39:15
so that is what we get by using a form01:39:19
data object is the ability to had a have01:39:22
a whole bunch of things including a01:39:24
whole bunch of files that we can bundle01:39:26
together as the body setting this is the01:39:29
content type01:39:31
we can send it to the server all as one01:39:34
package01:39:36
all right moving on to number eight the01:39:39
one that so many people struggle with01:39:41
moving on to talk about course cross01:39:45
origin resource sharing01:39:49
now this01:39:51
isn't so much a command that you call01:39:53
it's not a method that you use it's more01:39:57
a concept it is a bunch of security that01:40:00
has been put in place it's a policy that01:40:03
has been implemented by all the browsers01:40:05
all the browser companies agreed on this01:40:08
policy this is how we're going to01:40:10
protect users we want to make sure that01:40:14
when the JavaScript01:40:17
running on a web page that comes from01:40:19
domain a is making a request to some01:40:23
other domain some other origin01:40:26
when that request is being made01:40:28
we want to make sure that the data01:40:30
coming back the browser and the server01:40:33
are both in agreement that yes you're01:40:36
allowed to have this data01:40:38
and the settings in your fetch call the01:40:42
settings in your request are not going01:40:44
to be something that's going to leak01:40:46
private information01:40:48
so cores while it can be frustrating01:40:51
while it can be difficult to wrap your01:40:53
head around at times is a very necessary01:40:56
part to keep everyone safe01:40:59
so01:41:01
just a few notes for you that you can01:41:04
look back and reference to remember01:41:06
these things so01:41:08
requests that are not01:41:11
get method or a head method must include01:41:16
in the headers one header called origin01:41:19
which is hey what's the origin that01:41:21
you're coming from01:41:23
that will get sent to the server01:41:27
the server looks at that and then01:41:30
decides okay I need to set some headers01:41:34
there's going to be a header set by the01:41:36
server01:41:44
called Access Control allow origin01:41:50
and then it's going to have a value01:41:52
which oftentimes it's just an asterisk01:41:55
meaning I don't care anybody's allowed01:41:57
to access my data01:41:59
but it is also possible for it to send01:42:02
back01:42:03
something like this01:42:11
if the server sends back this header01:42:15
with this value01:42:18
hey that's where I'm running my thing01:42:20
that's where my website is running so01:42:24
that comes back from the server my01:42:26
browser is going to look at that it's01:42:27
going to look at my origin and say hey01:42:29
cool you are allowed to do whatever you01:42:32
want to do if you want to send cookies01:42:34
you can send cookies you don't have to01:42:36
but I'm going to allow it if you want to01:42:38
use the data that comes back from the01:42:40
server that's fine too you're allowed to01:42:43
use it so you can take it you can stick01:42:44
it in an image you can put it on an01:42:46
HTML5 canvas you can use it there that's01:42:49
absolutely fine01:42:52
the most common error that you get with01:42:55
cores is the one that says01:42:57
Access Control allow origin header01:43:00
missing or it doesn't have a value that01:43:03
matches your origin01:43:05
and that just means that you either set01:43:09
something in your headers that went to01:43:11
the server or you're using settings in01:43:13
your fetch request01:43:15
that the server didn't like or their01:43:18
server is saying no01:43:19
from your domain you're not allowed to01:43:21
do this01:43:23
people who are writing the code on the01:43:25
server side may even look to see okay do01:43:28
you have your API key that authorization01:43:30
header with the Json web token or an X01:43:34
API key header that has the API key if01:43:37
you don't have those things01:43:39
I'm not going to allow you to access the01:43:41
data so it's going to turn this off01:43:43
which means the browser is going to say01:43:45
Coors error you can't touch the data01:43:47
doesn't matter if it comes back you're01:43:49
not allowed to touch it01:43:51
so things that don't need this01:43:55
Access Control allow origin the things01:43:57
that are allowed to go through are01:44:03
if it's a simple request01:44:06
so the method is head get or post so get01:44:09
we've talked about it's just hey give me01:44:12
some data01:44:13
post I'm uploading some data I don't01:44:16
necessarily need a response I'm just01:44:18
uploading some data01:44:20
head01:44:21
it's like a get request or a post01:44:24
request but all you're sending is the01:44:25
headers01:44:26
you don't want a response you don't care01:44:28
about a response other than the headers01:44:31
I'm sending the request headers I want01:44:33
the response headers back maybe I need01:44:36
to look and see if I'm getting the right01:44:37
headers01:44:38
so01:44:40
if it's one of those three01:44:42
okay that's good that means that it's a01:44:45
simple request but01:44:48
if it's one of those three and01:44:51
the only headers that you're allowed to01:44:53
set in your request are these ones01:44:56
so accept what are the file types that01:44:58
you're going to accept back language01:45:00
what's your preference for language if01:45:03
there's a choice between language of01:45:04
files content language very much like01:45:08
accept language content type01:45:10
I'm01:45:12
going to be uploading with post a Json01:45:14
file okay you're allowed to do that01:45:18
um01:45:19
range so I'm getting back a font file01:45:22
and I'm going to be wanting certain01:45:25
parts of the data so that's the range01:45:28
header01:45:29
content type01:45:31
if you're setting content type01:45:34
these are the only allowed values that01:45:37
you can use01:45:38
application X www form URL encoded is01:45:42
what's used by default when a form is01:45:45
submitted if you're actually uploading01:45:47
files instead of just text or data or01:45:50
string multi-part form data is what you01:45:53
have to use or plain text you can be01:45:56
uploading that so I can't01:45:59
be posting a Json file01:46:02
I can't be uploading an image file even01:46:05
though oh yeah it was a one of these01:46:08
types01:46:09
we also have the Restriction that these01:46:11
are the only headers that can be set and01:46:13
these are the only allowed types if it01:46:15
falls outside of this they're saying01:46:18
okay it's not just a basic simple01:46:21
request so01:46:23
we need more Security in this case01:46:26
and you know01:46:29
the values for these ones this is an01:46:32
additional restriction that was added on01:46:34
by some of the browsers01:46:37
if you use accept accept language01:46:39
content language you're only allowed to01:46:41
use standard values you can't make up01:46:44
your own values you have to use ones01:46:46
that are part of the standard01:46:48
and the last one is you cannot stream01:46:51
data from the browser to the server it's01:46:54
got to be here's the file here's the01:46:56
whole file there you go it can't be a01:46:59
readable stream you can't be streaming01:47:01
the data with unknown end to it01:47:05
um01:47:08
the request that goes out first this01:47:12
options request now we've talked about01:47:14
head get post01:47:16
options is another kind of request it's01:47:19
another HTTP method which was created01:47:23
specifically for course this is this01:47:26
pre-flight request if you've ever heard01:47:28
of a PreFlight request01:47:30
basically01:47:31
when the browser sees that you're going01:47:33
to be making a request to a different01:47:35
origin it's going to create something01:47:38
very much like a head request it's going01:47:41
to say okay here's some headers I'm01:47:44
going to set the access control request01:47:46
method01:47:48
I'm going to set the access control01:47:50
request headers01:47:51
so I'm saying these are the headers this01:47:54
is the method I'm going to be using01:47:56
here's my origin there's a bunch of01:47:59
things that the browser is going to put01:48:01
inside of here01:48:02
it's going to then send this request01:48:05
which is just the headers off to the01:48:07
brow off to the server the server will01:48:10
then figure out01:48:11
whether or not you are allowed and it01:48:14
will send back headers which will01:48:17
include this one hopefully Access01:48:20
Control allow origin to say whether or01:48:22
not you're allowed to do it and it's01:48:24
only after that initial request and01:48:26
exchange of headers that the browser01:48:28
will actually do your post or your get01:48:31
or your put or your patch or your delete01:48:33
whatever the method is it's only after01:48:35
this initial options request that your01:48:39
thing that you're trying to use fetch to01:48:42
do it's only after that that it will01:48:44
actually go through01:48:48
so01:48:49
in the request object that you create01:48:52
there is a mode property that we can set01:48:54
so we've talked about credentials01:48:57
where you can decide whether or not you01:48:59
want the cookies to be sent along we've01:49:01
talked about cash as one of the options01:49:03
inside of there01:49:04
so01:49:06
if you create a request I don't have a01:49:08
request object right here but if you01:49:09
were to create a request object01:49:16
and there let's just move that up so I01:49:20
can use it as the URL01:49:23
in my options01:49:24
we've talked about cash01:49:27
and we can say that yeah we're just01:49:30
going to use the default method for that01:49:32
credentials let's set it to Omit or same01:49:36
origin01:49:39
you've got method01:49:41
well we can do01:49:44
post get patch put delete whatever we01:49:46
like01:49:48
we've got headers we've got the body01:49:50
forget we wouldn't have a body but for01:49:53
post we would and the mode is the other01:49:57
one and the values that we have right01:50:00
here there we are No Chorus course same01:50:03
origin navigate01:50:06
if you put things to no course01:50:10
you're telling the browser oh no don't01:50:13
worry about it it's not a course request01:50:15
let's pretend that I'm not requesting to01:50:17
a different origin01:50:18
so it's going to skip the options01:50:20
request01:50:21
but01:50:23
if you didn't meet these requirements if01:50:26
you were not using a simple request01:50:28
guess what things will fail01:50:32
course01:50:34
is01:50:36
going to be the default value for this01:50:39
if you're actually making a cross-origin01:50:41
request if you're making a fetch call to01:50:43
a different domain01:50:45
this is going to be what the browser01:50:47
puts in there but you're allowed to hard01:50:49
code it you can come in here and say oh01:50:51
yeah I'm making a course request01:50:53
look I'm going to pick some dot photos01:50:55
this isn't where my web pages my01:50:57
index.html is on 127001 Port 5500 it's01:51:02
not here01:51:03
so yes this is a course request01:51:06
but01:51:08
I could do this I could say hey01:51:10
it's a no course request01:51:14
so I'm telling the browser don't make a01:51:18
options request don't send that initial01:51:21
bunch of headers off to the server don't01:51:23
ask for an access control allow origin01:51:26
header to come back01:51:28
so basically I'm saying01:51:30
well I'm going to send a request off to01:51:32
the server but I know that because it is01:51:35
cross origin I'm not going to get the01:51:38
thing that I'm asking for01:51:40
that's what we're seeing here01:51:44
if you don't meet the requirements01:51:47
with here when you set it to course the01:51:50
options request will be made you have to01:51:52
meet the requirement to get the right01:51:53
values back if you set it to no course01:51:55
it doesn't really change what's going to01:51:58
happen it just means you're going to01:52:00
skip over the options thing which means01:52:02
you're not going to have that the header01:52:04
if it is a cross-origin request and01:52:06
things are going to fail as well01:52:08
same origin means01:52:11
hey I'm making a request to the same01:52:13
origin so you should try and stop me if01:52:16
I'm not making a request to the same01:52:17
origin01:52:19
um this would be something that you01:52:21
would use if you had a whole bunch of01:52:23
requests that were dynamically being01:52:25
made01:52:26
you could create your own request object01:52:29
where you're just changing the URL the01:52:32
request object will have the same01:52:34
settings for every single one of these01:52:35
requests it's just the endpoint changes01:52:38
you could set this as a default value01:52:40
for the request mode01:52:42
and this last one navigate it's one that01:52:46
you can't set through JavaScript it's01:52:47
the one that the browser will set and01:52:50
basically if you click on an anchor tag01:52:52
and you're navigating to a new page you01:52:54
submit a form and it's loading a new01:52:56
page that's a navigate action any action01:52:59
that's going to replace the current page01:53:03
is a navigate action it's not something01:53:05
that you can set through JavaScript01:53:07
though01:53:09
these are the three you can set in01:53:10
JavaScript but01:53:12
you can't get around the course01:53:14
requirement by changing these01:53:16
okay now01:53:18
if you didn't meet the requirements it01:53:21
is possible if you said hey I'm making a01:53:24
course request01:53:25
you're saying go ahead make that01:53:27
PreFlight request01:53:29
good for you01:53:30
now you've got it back but you didn't01:53:34
get the answer from the server that you01:53:36
wanted you didn't meet the criteria so01:53:39
it's going to give you a course error or01:53:42
it's going to give you01:53:44
the response object saying okay yeah01:53:46
yeah you got the response object but01:53:49
because you didn't meet the course01:53:50
criteria you're not allowed to get to01:53:54
the data01:53:55
that is an opaque response that's what01:53:58
it's called01:54:01
opaque responses are01:54:05
can be generated when you say it's not01:54:07
course01:54:08
so the request goes to the server the01:54:10
request comes back but it was a course01:54:13
but it was a cross-origin request01:54:17
the contents come back01:54:19
if it's text that you're going to use01:54:21
inside of a script tag or a link tag or01:54:24
it's an image video audio that you're01:54:26
going to put on the page or the content01:54:27
for an iframe an embed or an object01:54:30
okay you can take that text or that01:54:32
image and display it in one of those01:54:34
containers01:54:36
if it's an image that you're requesting01:54:38
that you're trying to use inside of an01:54:39
HTML5 canvas it will not let you if it's01:54:43
a web font it will not let you if you're01:54:46
using the cache API and you're calling01:54:48
the add or add all methods it's not01:54:51
going to let you01:54:52
the HTTP status code for an opaque01:54:55
response is going to be zero01:54:59
so I have a couple of examples on this01:55:02
page right here01:55:04
I'm going to do two fetch calls for the01:55:07
image01:55:08
this image right here01:55:10
and let's make it the same as the other01:55:12
ones 300y 200 High01:55:16
so I'm going to make two requests for01:55:17
the image two requests for this local01:55:19
Json file so the Json file is local it's01:55:23
right here on my domain my origin so01:55:26
those are not cores calls so setting01:55:30
no cores or using the default which is01:55:32
core which would be whatever the origin01:55:35
is01:55:36
here we can go in here and actually01:55:38
change it01:55:44
now I can say course it's not a01:55:47
cross-origin request but I can say01:55:48
course01:55:51
same thing up here I'm not specifying it01:55:53
but because it is an external URL it01:55:56
means that this is a course request01:56:00
we can take a look to see at the values01:56:02
that we're getting back here01:56:03
there we go so01:56:05
my two local requests for the Json file01:56:09
doesn't matter if I set the mode to01:56:11
cores and no course01:56:12
it works there's no restrictions I can01:56:15
do whatever I want with that data01:56:18
here01:56:19
for the image I'm going to the pixum01:56:22
website01:56:23
when I set it to cores01:56:25
I've met all the requirements I'm not01:56:27
sending my cookies I'm not doing01:56:28
anything weird so it comes back with a01:56:30
200.01:56:31
by setting it to no course I get a zero01:56:34
as my status code this is an opaque01:56:38
response this is the kind of response01:56:40
that comes back that says okay you send01:56:43
a request you send some data I'm I got01:56:46
the stuff back in the browser01:56:48
but JavaScript is not allowed to touch01:56:51
it you're not allowed to do anything01:56:53
like put the data into a canvas or use01:56:57
the web font as part of your CSS because01:56:59
you didn't meet the security01:57:01
requirements01:57:03
so that is what an opaque response if01:57:05
you ever see this status code zero01:57:08
that's what it means it means that you01:57:10
got an opaque response you didn't meet01:57:12
the course requirements01:57:17
so the last takeaway here is when you01:57:22
get an opaque response or when you want01:57:24
to get an opaque response if you don't01:57:26
want to go through all the hurdles of01:57:28
making sure that all the things are01:57:30
correct you want to just say oh yeah01:57:32
okay treat it like a no course request01:57:35
I'm ignoring the course policy01:57:38
when you do that it's not that you're01:57:40
saying okay I don't care or let my page01:57:43
break it's I don't care about getting a01:57:46
response back from the server01:57:48
I want to save time maybe01:57:51
I don't want to wait for the pre01:57:53
pre-flight request and then my actual01:57:56
request to go to the server maybe the01:57:58
person's got a very slow internet01:58:00
connection I don't need to get the01:58:02
result back all I need to do is send01:58:04
some data to the server01:58:05
okay great go ahead send the data to the01:58:09
server upload the file if that's all you01:58:11
care about doing if you don't want to01:58:12
deal with or don't want to work with the01:58:15
response you don't have to01:58:18
that's what it is01:58:19
and we talked about response headers and01:58:22
forbidden header names before01:58:25
this list right here in the response01:58:29
this is a safe list so when you look01:58:32
through the response and the request01:58:34
header names01:58:36
you will find a section called course01:58:38
safe listed response headers so this is01:58:42
the list of names that you will have01:58:43
that course will send you back that01:58:47
cores will let you access through01:58:49
JavaScript01:58:50
cores will prevent you accessing some01:58:53
header names01:58:55
so if I make a request to my domain01:58:57
versus another domain01:58:59
I will have a different set of headers01:59:02
that I'm allowed to access in JavaScript01:59:04
in the response objects these are the01:59:07
ones that if I'm making a course request01:59:09
that I'm still allowed to access through01:59:11
JavaScript01:59:13
all right01:59:15
moving on to dealing with multiple01:59:18
requests so how do we deal with multiple01:59:21
requests01:59:24
all right moving into here now when I01:59:27
say multiple requests I'm not saying01:59:29
uploading multiple files we've already01:59:30
talked about doing that I'm talking01:59:32
about times when01:59:34
I need to talk to multiple servers or I01:59:37
need to talk to multiple endpoints on a01:59:39
server and I want to get all the data at01:59:42
the same time or I need to get the data01:59:45
in a specific order so there's a01:59:47
sequence or I have to do everything at01:59:49
the same time01:59:51
so to do everything at the same time the01:59:54
promise object the thing that fetch uses01:59:56
internally01:59:57
has a method called all meaning I want02:00:00
to get responses from all these promises02:00:03
I'm going to pass in an array of02:00:05
promises02:00:06
and when I get the response from all of02:00:08
them that's when I'm going to work with02:00:10
them02:00:11
race means I'm going to give you an02:00:14
array of promises02:00:15
give me the first thing that comes back02:00:18
all settled is give me the array when02:00:21
everything is successfully done so I'm02:00:24
just going to use promise.all I have02:00:27
another video talking about all these or02:00:29
videos talking about promise.all02:00:31
promise.race all settle and so on02:00:34
for right now I'm just going to use02:00:35
promise.all02:00:37
the sequence is the simpler one the02:00:40
sequence02:00:46
be something like this so if I do02:00:49
imagestr from a fetch02:00:53
I can do this I can say then02:00:56
we get our response02:00:59
we do our check02:01:05
now this would be where we could02:01:08
return it we can extract The Blob02:01:12
but we can also02:01:16
use this as a trigger to say all right02:01:19
I've got my first response now I need to02:01:22
get my second one so instead of02:01:25
returning the blob I'm going to say02:01:27
return02:01:28
fetch02:01:31
and here's my other file02:01:34
so that's going to return a promise02:01:36
which down here hey it's another02:01:38
response object and we can do the same02:01:41
thing as we did right here inside this02:01:44
one02:01:46
now I do want to get this blob as well02:01:49
so maybe I will save that02:01:52
we'll say uh02:01:54
up here02:01:57
this would be my image response02:02:00
and we'll have our Json response02:02:06
so we're saving that02:02:08
inside of here02:02:11
and this can even be02:02:16
blob there we go so I'm putting the02:02:19
promise that will eventually give us the02:02:21
blob inside of this variable and then02:02:23
inside of here I can do02:02:26
the02:02:28
Json response is response.json there we02:02:31
go there's the two promises inside of02:02:33
there02:02:36
now where we want to deal with them02:02:39
inside of the next then02:02:46
I have02:02:48
two things that are promises image02:02:50
response and Json response so I can use02:02:54
promise.all02:02:56
so we can say right here return02:02:59
promise.all02:03:03
and this is an array being passed in02:03:06
image response and Json response02:03:10
now inside of here what's going to get02:03:13
passed in here is going to be an array02:03:15
it's going to be an array that has the02:03:17
blob and the Json turned into a02:03:21
JavaScript object02:03:23
so I can use destructuring02:03:25
to say02:03:28
in here here's my function inside of02:03:32
here I've got my image blob02:03:35
and I've got my02:03:38
data object02:03:40
those two things02:03:46
so we'll just write out the data object02:03:49
there we have it02:03:52
so we're going to fetch the image first02:03:53
when that comes back when we've got the02:03:55
response I'm going to save02:03:58
this blob here or the promise that will02:04:01
resolve to a blob inside of here and02:04:03
then I'm going to call the next fetch02:04:05
when I get the response for the next one02:04:07
I will extract the Json02:04:10
and then I will wrap02:04:13
those two promises the promise that02:04:16
resolves to a blob the promise that's02:04:18
going to resolve to a Json file02:04:21
turned into a JavaScript object02:04:24
those two things02:04:26
will get passed here so the promise.all02:04:28
will sit right here when both of them02:04:32
have finished resolving02:04:34
then I get an array that contains the02:04:37
blob02:04:38
and the JavaScript object02:04:44
and there it is there is our JavaScript02:04:48
object so we went to the random data API02:04:50
we got 10 users that's what's inside the02:04:53
data object02:04:54
and if I write out02:04:57
a blob02:04:58
that should just give me a blob it'll02:05:00
tell me the size of that there it is02:05:02
there's the size and type02:05:04
so those are the two things that we got02:05:06
back so that was the sequence02:05:09
and02:05:10
if you just want to go directly to the02:05:14
promise.all the other way that we can do02:05:16
this02:05:18
if you want to get them all at the same02:05:20
time02:05:21
you can do this you can say promise02:05:24
dot all02:05:27
it's an array02:05:31
dot then02:05:32
dot catch02:05:37
so inside of here02:05:39
I will pass in Fetch for the image02:05:43
string and fetch02:05:46
for the Json string so there's my two02:05:49
fetch calls02:05:51
they are inside of an array02:05:53
and this then will have an array with02:05:57
two responses so image response02:06:01
and Json response02:06:09
to wrap that in parentheses the array02:06:12
that is02:06:13
there we go02:06:15
so I have two response objects here02:06:18
and I have to do the same thing that I02:06:20
did here02:06:23
to be able to extract or rather here the02:06:27
response blob response Json I have to02:06:30
return a promise dot all02:06:33
which is an array and inside the array02:06:37
is my image res dot blob02:06:41
that's the first promise and the Json02:06:43
res dot Json that's the second promise02:06:45
so in my final then what I'm going to be02:06:49
getting inside of this array is the blob02:06:52
and the02:06:55
Json data02:07:00
so two different ways of writing it but02:07:03
achieving the same thing here or02:07:05
achieving similar things here I'm saying02:07:09
I want to do both fetch calls at the02:07:12
same time02:07:13
when I get both responses I'll extract02:07:17
the data at the same time and then work02:07:19
with the data02:07:21
at the same time02:07:23
here I wanted to do the image response02:07:26
first and then fetch the second one so02:07:31
we can add another then and work with02:07:35
the data here02:07:41
this fetch could be in a Next Step so I02:07:44
could return02:07:46
response.blog down to the next one and02:07:49
then in the next one I do something with02:07:51
the image and then call fetch so let's02:07:54
let's make that change02:07:56
foreign so we're going to return that which02:07:58
means02:08:00
this is no longer in here02:08:08
so in this second one right here02:08:11
what we're getting back is the blob02:08:14
and in here we can work with02:08:18
blob02:08:20
add image02:08:22
to the page02:08:24
Etc whatever you want to do02:08:26
then we do the fetch for the Json02:08:29
and then here's the Json response02:08:32
so you can02:08:34
break it up into this series of steps02:08:36
using the then and this is one of the02:08:38
reasons that I prefer the then to me02:08:40
this just feels more logical to break it02:08:43
up into the steps I can say do this then02:08:46
this then this then this and02:08:49
I will often turn these into functions02:08:52
of their own so instead of02:08:58
writing the code right there I will just02:09:00
have the function names and this will02:09:01
just be a series of thens with function02:09:04
names inside of them do this then this02:09:07
then this then this so each one of these02:09:08
is this little Atomic pure function that02:09:11
we can do02:09:13
all right and that brings us into step02:09:16
10 our final step the abort02:09:20
so this one will be a fairly quick one02:09:23
if you want to02:09:25
stop a fetch call02:09:27
what we can do is have somebody click on02:09:31
a button or do some other interaction to02:09:33
the page to stop a fetch call that has02:09:36
already begun02:09:38
so let's02:09:39
add a URL inside of here here I'll just02:09:43
grab one from the previous page02:09:48
there's from the multiple one02:09:50
let's do this02:09:56
all right now let's make this a really a02:09:58
much bigger one so we'll say it's 3 00002:10:00
pixels wide 2 000 pixels high so it's a02:10:03
much bigger image so it's going to take02:10:05
a little bit longer02:10:07
um02:10:08
to do an abort to stop a fetch call you02:10:12
have to create an abort controller so02:10:14
there's an abort controller object it02:10:17
has a property called signal02:10:19
this signal property is what we pass02:10:22
into our request object or effect object02:10:26
so let's02:10:29
to create a request object let's break02:10:31
this into02:10:32
steps to follow what we're doing02:10:35
previously02:10:41
in the options here we can say02:10:45
there's a property called signal02:10:48
if I could spell it correctly02:10:51
there it is like this now you can just02:10:53
put the word signal it's the same02:10:55
property and value the same variable for02:10:57
the value as the property name so you02:10:59
can just write the word signal I'll02:11:01
write both just to make it clear here02:11:05
and02:11:10
we pass this request in here02:11:17
all right so02:11:20
when we don't get requests responses02:11:22
back so the network fails that will02:11:25
trigger an error if we don't have the02:11:27
right status code if we're throwing an02:11:29
error inside of here it'll trigger this02:11:31
the abort will also trigger02:11:35
a error02:11:37
so let's take our response02:11:46
foreign02:11:47
this is an image so I'll call the blob02:11:50
method not that we're going to be doing02:11:52
anything with it02:11:53
so here's our blob02:12:02
so I'm just going to write out that02:12:03
message02:12:05
all right so let's test this out02:12:09
back in main we'll make sure that we're02:12:10
on number 10.02:12:15
there we go02:12:19
oh I need a function yes all right so02:12:22
let's do that so02:12:24
export function get data02:12:32
there we are now we have the function02:12:34
there it is got the blob all right so we02:12:37
did the fetch02:12:39
there we go now let's slow this down a02:12:41
little bit in the network tab there is02:12:43
throttling so let's go to slow 3G just02:12:46
so we can slow this request down a02:12:48
little bit02:12:49
refresh the page02:12:51
and it'll take a second this is going02:12:55
so the fetch is being made we're still02:12:58
waiting we're still waiting we're still02:12:59
waiting eventually we will get that02:13:01
image back and it will write the message02:13:04
so02:13:07
we can check the network tab here even02:13:11
there we go02:13:13
got the blob okay so it finally came02:13:16
back with the result02:13:17
so we know it's going to take a while02:13:19
that's going to give us a little bit of02:13:21
time to work with02:13:22
I'm going to go into my HTML and I'm02:13:24
going to add an abort button so I'll put02:13:27
it right underneath this image02:13:34
and let's there's the abort button right02:13:37
there I'm going to change this02:13:39
throttling to fast 3G instead of slow 3G02:13:42
just to speed it up a little tiny bit02:13:44
so there's our abort button and we're02:13:46
going to listen for clicking on that02:13:50
board button02:13:54
so we will say right here02:13:57
um02:14:02
when this function runs we're going to02:14:05
let abort BTN equal document get element02:14:09
by ID02:14:12
foreign and02:14:18
we'll add the event listener for the02:14:20
click event02:14:21
when that happens what do we want to do02:14:25
we want to stop this fetch call02:14:31
so in a request we have that signal that02:14:35
signal02:14:37
is the signal property from the abort02:14:39
controller that we created02:14:42
basically we've just attached something02:14:45
to the fetch call so that we can02:14:47
reference it later on02:14:49
inside of the button click right here02:14:51
our controller02:14:56
we do that02:15:03
that's all we have to do02:15:06
access the controller and call its abort02:15:08
method and then whatever has this signal02:15:11
connected to it will be stopped02:15:15
so let's refresh the page and click02:15:18
abort02:15:20
there we go we aborted it and here is02:15:23
the error Dom exception the user02:15:25
reported a request02:15:27
I didn't have that in my code02:15:29
I'm just saying console.warn02:15:32
my error says invalid02:15:35
this is the abort right here that we're02:15:38
doing that triggers an error so we're02:15:42
inside the fetch we haven't got the02:15:44
response yet we aborted it at this stage02:15:49
it triggers an error that comes down02:15:50
here and the error is this02:15:53
this Dom exception error02:15:57
see right there is where it's triggered02:15:59
inside this get data method02:16:04
all right and those are the 10 steps now02:16:07
I also threw in here a bonus for you if02:16:10
you ever want to02:16:12
measure the download progress with fetch02:16:16
it is not possible currently to measure02:16:19
the upload progress so if you are02:16:21
submitting something to the server02:16:22
there's no way for us to measure the02:16:24
upload progress but we can measure the02:16:26
download progress02:16:28
when you do your fetch call02:16:31
it is possible to use a reader object02:16:34
the body02:16:36
is an actual Stream So This is a data02:16:40
stream this body object and the body02:16:42
object is inside the response remember02:16:45
the file the Json file the image that02:16:48
are inside the body of the HTTP response02:16:51
well we have a built-in thing called get02:16:54
reader which will create a reader object02:16:57
that lets you read the file as it's02:17:00
being downloaded02:17:02
so we can get from the headers02:17:04
the content length so we know the size02:17:06
of it02:17:07
and what's going to happen is we're02:17:10
going to call this read method on the02:17:13
reader that we created02:17:14
so we're going to continually every time02:17:16
we get a chunk of data we'll read it02:17:19
another chunk we read it another chunk02:17:20
we read it another chunk we read it and02:17:22
we just save all the chunks inside of an02:17:25
array02:17:28
so we're calling push02:17:30
when we call read we get a value we put02:17:32
that into the array so we have this02:17:34
array called chunks and once we're done02:17:38
the whole thing so we're going to keep02:17:39
going going going going going until the02:17:42
reader says02:17:43
hey you've got no more data the done02:17:45
value is true02:17:47
when that happens we're going to exit02:17:49
from our Loop02:17:51
we're going to take02:17:54
the total bytes that were downloaded02:17:57
we're going to create a byte array02:18:00
and then we're going to Loop through the02:18:01
array and we're going to put all the02:18:03
chunks of data that's inside this array02:18:05
into our byte array02:18:07
once we have that we're going to create02:18:09
a blob object with the byte array which02:18:12
is going to be our image02:18:14
and then remember our old trick with02:18:16
create object URL we can take that byte02:18:18
array reassemble it02:18:21
it's going to be the blob02:18:23
that we then load into our image02:18:28
so if we swap over to number 11 here02:18:35
and we're02:18:37
there we go so it's loading the progress02:18:40
done and then the image appears02:18:43
so that's the download progress and this02:18:45
example is using a blob but if it were02:18:49
text you could also just do this02:18:53
so02:18:54
create a new text decoder say this is02:18:56
the02:18:58
encoding that we're using take the byte02:19:01
array that we created up here filled02:19:04
with all the chunks of data and decode02:19:07
it so take all the data that you got02:19:08
trade it as if it's a utf-8 string02:19:11
put it into this variable right here and02:19:14
then if it's a Json string you can call02:19:16
Json to parse if it's just a string just02:19:19
take the string and do whatever it is02:19:20
that you want to do with it on your web02:19:22
page but it will have given you02:19:26
the progress as it was occurring02:19:30
all right and that's it you now know02:19:34
everything that there is to know that02:19:36
you will need to know about fetch02:19:39
so I hope that helps I hope you enjoyed02:19:42
that02:19:44
if you have any questions feel free to02:19:45
leave those in the comments I answer as02:19:47
many as I have time for and as always02:19:50
for watchingDescription:
This full course covers every aspect of working with fetch from beginner to expert. It demonstrates and explains alternate syntaxes, the related components - Request, Response, URL, URLSearchParams, Promises, Headers, File and Blob, plus how to abort fetch calls, handling download progress, understanding CORS, generating new content in your pages based on fetched data, handling multiple requests in sequence or in parallel. GitHub repo with full project source: https://github.com/prof3ssorSt3v3/all-the-fetch Content-Security-Policy reference: https://content-security-policy.com/ HTTP Headers reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers Forbidden Header names: https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name Donate here - https://ko-fi.com/prof3ssorst3v3 - to support this channel 0:00:00 Introduction & Setup 0:03:20 1: Basic Fetch & Promises 0:16:40 2: Async Await Alternate 0:21:35 3: URL, Request, Headers 0:32:35 4: Response Objects 0:45:20 5: Generating Content 0:58:41 6: API Keys, Credentials 1:24:45 7: Uploading Data & Files 1:39:34 8: Understanding CORS 1:59:15 9: Multiple Request Management 2:09:17 10: Abort 2:16:03 Bonus: Progress
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Ten Steps to Mastering the Fetch API" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Ten Steps to Mastering the Fetch API" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Ten Steps to Mastering the Fetch API" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Ten Steps to Mastering the Fetch API" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Ten Steps to Mastering the Fetch API"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Ten Steps to Mastering the Fetch API"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.