Preview
Video Player
00:00
00:00
Write a Basic Fetch Request
7:13Let's get started by writing a basic fetch request using the global fetch() method. Then we'll use JavaScript promises to handle the results returned from the server.
To code along with me, launch
the workspace with this video or download
0:00
the project files for this workshop and
open them in your favorite text editor.
0:03
When you open the project files or
0:07
workspace, you should see
an index.html file and a js
0:08
folder containing a file named app.js,
the two main files we'll be working with.
0:13
When you preview index.html in the browser
you'll see an empty select menu and
0:18
div container, and
below them a simple form.
0:24
Over in app.js,
there are three pre-written variables.
0:27
It's selecting elements from index.html
like the select menu, card div and form.
0:32
We're going to be working with these
elements throughout the workshop.
0:39
So the fetch API provides an easier way to
make network requests in the browser and
0:42
handle responses.
0:48
To make a request,
you use the global fetch method.
0:49
Fetch takes one mandatory argument.
0:52
The path to the resource
you want to fetch.
0:55
I'm going to request data from
the Dog API at dog.ceo/dog-api.
0:58
This simple API returns
a list of dog breeds and
1:03
random images of dogs either by breed or
all breeds.
1:07
Now many APIs require an API key to let
you connect to their web server and
1:11
access data.
1:16
To keep things simple I chose a public
API that does not require an API key.
1:17
And here you can see all the different
endpoints like all dogs by breed,
1:22
by sub breed and so on.
1:26
So first, I'm going to return
data from the All dogs endpoint.
1:28
And I want this endpoint that returns
a random dog image from all the breeds.
1:33
So I can click this JSON link and
copy this URL in the address bar.
1:39
Over in app.js under
the fetch functions comment,
1:46
I'll first type the fetch method, and
pass it the URL to fetch as a string.
1:50
As I mentioned in the previous video,
Fetch API uses JavaScript promises to
2:01
handle the results
returned from the server.
2:05
Again, be sure to watch our workshop on
JavaScript promises if you're not sure how
2:08
promises work.
2:12
A promise represents the eventual
result of an asynchronous operation.
2:13
Similar to callbacks, promises allow
us to wait on certain code to finish
2:18
execution before running the next bit of
code in a cleaner, more readable way.
2:22
Now the fetch method
itself returns a promise.
2:27
So for example, if I copy this fetch
method and run it in my browser's console.
2:31
Notice how it returns a promise object.
2:39
And if I click the arrow to expand it, we
see that the promise status is resolved.
2:42
That means the asynchronous task
was completed successfully.
2:49
The promise was fulfilled because
the browser received a response from
2:52
the server.
2:55
Now nothing's happened yet
in our app because we haven't written
2:56
any code to handle the response and
the return data.
2:59
We'll do that now using
a sequence of promises.
3:03
Promises get executed in sequence.
3:06
You chain then methods to the fetch method
which returns a promise of their own.
3:08
The methods get executed sequentially
once the previous promise is fulfilled.
3:13
In other words, something happens
after something else is resolved.
3:18
So in our case,
the fetch promise is fulfilled or
3:23
resolved when the browser receives
the response from the server.
3:26
So, next I'll chain a then
method to fetch and
3:30
pass it a function using an error
function that takes the response via
3:33
a parameter I'll call response and
logs it to the console for now.
3:39
Remember you're able to place the chain
then methods on separate lines to make
3:49
your code easier to read.
3:53
Now, this isn't immediately going
to return the data we expect.
3:55
You see once the data finishes loading and
a fetch promise is fulfilled,
4:00
fetch returns a response object containing
information about the response,
4:05
like the status code and
the corresponding status message.
4:10
So here, the response lets us know
that the request went through.
4:15
The actual data we want is in the body
property of the response object.
4:19
Now the API we're using
returns data in JSON.
4:24
So in order to access and use the data,
we need to parse it to JSON first.
4:28
So I'll change the function
to return the raw data
4:33
in the response in JSON
format using response.json.
4:39
There are different methods you
can use on a response object.
4:45
Each lets you handle different
response types, for example,
4:48
blob for images, text for
text files and more.
4:52
I posted examples of some of the other
common methods in the teacher's notes.
4:56
So, response.json reads the response and
returns a promise that resolves to json.
5:01
And because we're using
a single line arrow function,
5:08
the promise returned from
the response.json() method call
5:12
will be implicitly returned
from our arrow function.
5:15
And this allows us to chain another
5:19
then method() onto our
existing then() method call.
5:22
So inside this method is where we
can do something with the json data.
5:25
For example, iterate over it, and
insert it into our page's content.
5:30
So in the second then method, I'll pass
a function that takes the json data,
5:34
via a parameter I'll call data, and
logs it to the console for now.
5:40
Let's go back to our console, refresh.
5:48
And great,
now we're getting the actual JSON data.
5:51
In the JSON object there's
a property named message, and
5:55
the value is the URL to an image.
5:59
So to access the value of
message I'll log data.message.
6:01
Refresh the page, and this is exactly
what we need, the URL as a string.
6:12
And just like that with three short and
simple methods, we have our data.
6:18
Now, as you can see,
6:24
each time I refresh the page,
the endpoint returns a different URL.
6:25
And now, we can use this URL in an image
element source attribute to display
6:30
a random dog image.
6:34
And we'll do just that in the next video.
6:35
Keep in mind that by default,
fetch won't send or
6:38
receive any cookies from the server.
6:41
And this will affect you in dealing
with the user authentication.
6:43
So the fetch method also accepts
an optional second parameter,
6:47
an init options object you can use
to customize the HTTP request.
6:51
So for example you can send a request
with credentials included, or
6:56
make a post request instead
of the default get request.
7:00
And you'll learn more about this in the
final video when we post data to a server
7:04
using fetch.
7:08
For now you can read more about it in
the teacher's notes with this video.
7:09