This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Asynchronous API Requests" Lesson
[00:00:00]
>> Brian: This is still gonna be in SearchParams. So if we go back to our website here, just to show you, localhost1234.
>> Brian: We have all the search facets that we need to be able to search for pets, but we're not actually using that to hit the API yet, right?
[00:00:19] So what we wanna do is we wanna add the ability that we can go and hit the API and get pets back so we can display them. So we're gonna add another useState here, we're gonna say contst [pets, setPets] = useState, and it's gonna be an empty array, all right?
[00:00:44] Because when you first request things from the API, there's gonna be no pets there.
>> Brian: Okay, here above the useEffect, we're gonna make an async function, so async function requestPets.
>> Brian: What we're gonna do is we're gonna say, const { animals }, which we're gonna destructure, right? Cuz we know it's gonna be called animals, and we're gonna say, = await pet.animals.
[00:01:25]
>> Brian: And we're gonna send the location, the breed, and the type, which is gonna be the animal.
>> Brian: All right, so a couple of things to unpack here, this may be your first time using an async function. So an async function is a function that is guaranteed to return a promise, right?
[00:01:47] So anything that's an async function always returns a promise. Even though I'm not doing anything here, this returns a promise that will resolve whenever this function completes. Now I'm just ignoring it, but that's beside the point. So that's what an async function does, but the superpower that you can decide of async functions is that I get this await keyword.
[00:02:09] So pet.animals returns a promise itself, right? And I'm just saying, hey, wait here in this function until this completes and then give me back the data. So I could say pet.animals.then and then do all that stuff inside of there, but here I'm just saying wait for this to finish and give me back the data.
[00:02:29] So it makes this asynchronous code of go to here, wait, go to here, wait, go to here, wait, and then finish, right? So I'm a big fan of async await, this just makes this code look really, really nice. So now I have animals, I'm guaranteed that animals will be done by the time I get down here and I can just say setPets with the animals.
[00:02:53] Or if it comes back with nothing from the API, just set it to continue to be an empty array, all right? If I request something and no animals come back, set it to be an empty array, and that's what this or operator is gonna do for us. Either it's gonna be whatever is in animals or it's going to be an empty array.
[00:03:15]
>> Brian: Pretty cool, right? I think it's pretty cool.
>> Brian: So now what I can do is I can go down to the form.
>> Brian: So this form that we put in here, and I can say unsubmit =, and I need to do two things here inside of this function.
[00:03:42]
>> Brian: The first thing is I don't want it to actually submit a form, right, like an HTML form. So I'm gonna say e.preventDefault, which you all have probably done at one point in your JavaScript career or not. If not, then God bless you, you've missed a really dark time.
[00:03:59] [LAUGH] Just kidding,
>> Brian: But this will prevent it from submitting a HTML post form. And then all we're gonna do here is we're gonna say requestPets.
>> Brian: So if we try to transpile this right now, right now, by default, Parcel is making this work for Internet Explorer 11.
[00:04:26] As a representative of Microsoft, I'm sorry [LAUGH] we don't need that, right? This is just a demo application that you and I are working on for fun, so we can just target modern browsers, right? We're okay to target the last two versions of Firefox and Chrome and call it good.
[00:04:44] Obviously, you need to cater this to your audience, right? So make sure you're looking at your analytics to figure out this should work for 99% of my users or something like that. But for us, we're just gonna say make it work for the latest browsers and that's it.
[00:05:01] So actually here inside of my notes, I have a really good list for you to hit all the latest browsers. So go ahead and just copy that right there, or you can type it out, but it's a lot.
>> Brian: So again, this is in the Handling Async. So Handling Async right there, number nine, down here, this browser's lists thing.
[00:05:31]
>> Brian: Okay, and then I'm gonna put this inside of my package.json. You can put it really anywhere, but here, underneath dependencies is good.
>> Brian: And so all this is is this is an array of various kinds of browsers that I want, Babel and PostCSS, which are both running behind the scenes inside of Parcel, compile my code to work for these browsers.
[00:06:00] And Parcel already knows to look here, which is cool.
>> Brian: So let's look at the last two Chrome versions, Chrome, Android, Firefox. These are all of the, quote-unquote, alive, evergreen browsers. Now, the reason I wanted to do this is because only very, very modern browsers support async await.
[00:06:19] Otherwise, it's going to transform this into something called a regenerator, which we just don't even wanna deal with, believe me.