Fetch Data with Vanilla JavaScript

[00:00:00]
>> Now where we are is we've got our basic HTML. We've got some simple styles. Let's add some JavaScript to make this a full jam stack site. We're going to use some JavaScript and we're also going to access the GitHub API. So to do that, we're going to create a New JavaScript file.

[00:00:21]
So let's open up basic folder and inside of it, we're going to create main.js. The name doesn't really matter. That's just what I've started doing. How many of you have used modern JavaScript without battle? Like just put it straight in the browser? I see a couple hands. It's the best feeling in the world.

[00:00:42]
So that's what we're going to do today is we're going to use modern JavaScript without a compiler. Because we're only shipping to I'm shipping to Chrome. If you're shipping to Firefox, that'll work. I think it'll work in edge to like, it's so exciting that we're getting to the point where we get to use the latest in JavaScript without needing a bunch of boilerplate to do it.

[00:01:00]
So let's write this file up. So the first thing I'm gonna do is just create a function. And this is gonna be called list Repos. And it's gonna use the a sync await keyword. And so this is basically it's a function that accepts a username is an argument, and then we'll be able to do something with it.

[00:01:22]
So inside of that, I want to get a list of all the Repos for that username. That's going to be a will await. Fetch is a native browser API, which is just wonderful. And then I'm going to hit the GitHub API. So we'll do github.com/users. And then let's take that username.

[00:01:47]
And we can search for Repos. And then I don't want to see forks or anything. So I'm going to limit it to type=owner. And let's see what I've been working on most recently. So we'll sort by when it was updated. Then, when we get back, the way that the fetch API works is it's going to give you a response.

[00:02:12]
And then if you want to use that response in a certain format, you have to parse it. So I know that GitHub is going to send us back json. So we're going to just parse it as json. And then once we've done that we can actually use it.

[00:02:25]
So I will call this or actually, sorry, we're going to catch in case something goes wrong. So if we get an error like you we're rate limited or something goes wrong in the request or was malformed, we're going to catch that and we'll be able to do something with it.

[00:02:41]
So I'm not going to do any intense error handling here. I'm just going to console error in case something goes wrong. And that'll give us information. And then I'm doing something here that if you've never seen this before, like. The fetch API is promise based. So what it's doing is it's executing something, and then it will resolve and that gives us access to a dot bin.

[00:03:05]
And when you use a sync await, what you're doing is unwrapping a promise so that you can get the return value of that promise the resolved value, without having to stick it into a dot bin. So what we could do is we could add another dot bin and do all of our handling in there.

[00:03:23]
But the mental model on that is just a little tricky and then you start getting things get nested and nested and nested. So I like async await to keep things at the top level when you're not doing a lot of parallel things because async await is blocking. So if you've got like three promises in a row and you use async await on all of them, it'll finish one before it starts two and so on.

[00:03:46]
So that is something to be aware of, but in this case, we're only doing one thing so it's okay that it's blocking because it would be blocking anyways.