Name: 1.1: fetch() - Working With Data & APIs in JavaScript
Uploaded: 2020-03-27T19:35:36.000Z
Duration: 15 min 39 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Hello, and welcome to the first tutorial video

Participle clauses

in this new series, working with data and APIs in JavaScript.

Adverbs of degree

So in this first video, I just want to look at one thing,

It allows you to fetch stuff-- data, images,

from all sorts of different kinds of places

So we're going to start with a very basic example.

It fetches a rainbow image, a local file, a JPEG file,

That's going to build-- that's the foundation on top of which

and graphing it, or reaching out to some like Weather Service,

and getting the local-- the temperature, based

The best place for you to learn all of the details

with everything you could ever possibly want

to know about the fetch web APIs is on the Mozilla Developer

I'm going to show you a small slice of what's

possible with Fetch and kind of build on that as we go video,

of making a request, an HTTP request, a hypertext transfer

Will you please-- could I please get some information.

Could I please send some information to you?

And we're going to do both of those kinds of requests.

And fetch can actually both retrieve and send.

But in this example, I just want to look at a simple

the first thing it's going to do is going

And it's going to give it a single argument, which

And in this case, it's going to be a file.

And that file is just going to be a local file called

The next thing we need to do is deal with the response.

So when we call fetch, a response comes back,

presumably with the data we're looking for somewhere in there.

I mean, it could be an error or other things could come back

But I'm just going to write down response.

Now this involves this idea of a promise.

that happens asynchronously, meaning we call fetch,

but some time passes because it takes some time

So how we get the response as part of a promise

to look at specifically when we get into the code.

And I will also include in its video's description

to work with JavaScript promises, some other videos

that I've made that might fill in some of the gaps here.

The response is actually a stream of data.

So we get the response but we need a whole other step

We need to sort of like complete that data

and store it in a format that we can work with.

Maybe it's like image data would come in as a blob.

There's all sorts of-- there's array buffer.

And a really, really important one is JSON.

So JSON stands for JavaScript Object Notation.

And this is going to be a format for storing data

that we're going to see again and again and again.

But in this case, we want to get it as a blob.

So I think we could call this third step like complete data

I really mean complete and grab the data that's

So there's this concept of the response body

which is pretty important, which is where the data actually is.

lots of other metadata about the network communication

that's in the response as well, that you could look

So once we've done that, we've completed the data stream.

this is really the steps for using fetch.

Subtitles ListPlay Video

1.1: fetch() - Working With Data & APIs in JavaScript

stuff

grab

expect

script