JavaScript: The Recent Parts

Async Await Solution

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Async Await Solution" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Kyle live codes the solution to the exercise, and demonstrates a common mistake that students are likely to make.


Transcript from the "Async Await Solution" Lesson

>> Kyle Simpson: All right, I know you are eagerly awaiting the solution to this exercise. [SOUND] All right, let's jump in and talk about the solution to async/await. We want to request all of the files concurrently. So we definitely are gonna need to make three separate getFile calls, right? If we call getFile(files[0]), and getFile(files[1]), and getFile(files[2]).

That would request them concurrently. But do we wanna get their responses back? Of course, we need to get some response. So if we were to say something like, text1 = await getFile. And then we have the same thing on the other two lines.
>> Kyle Simpson: Then what would be happening here is we would not be requesting the second file until after the first file finished.

So that would fail our concurrency thing. So we don't wanna do our awaits if we want things to happen concurrently. So let's take the awaits out. And if I take those awaits out, then these are not text anymore. These are the promises that are coming back. So this would be like pr1 and pr2 and pr3.

Well now that looks super like redundant, like, why am I calling that over and over? Why don't I, if I have a list of my files, I should just do something like, maybe in a map. If I mapped my list of files into a list of promises. So I could say prs, the promises, =

And I need a function that will turn the string into a promise. And that function is getFile. So getFile is our mapper function. So now I have an array of three promises. All the requests have gone out. And now I need to print them as soon as possible, but I need to print them in order.

So I can simply do for (let pr of prs). So loop over the promises array. And for each promise I can say, console.log(await pr). So now it's okay for the promise await for the await to block on the promise, because we do want then to print out sequentially.

One thing that you may have wondered, if you were working with this for loop. Since we used a map here you might have thought to yourself, well, you know, could I use a for each? So you might've tried to do something like prs.forEach, and then had a function here that, you know, called output.

That gets a pr and then console logs the await of that pr. Did anyone try that approach?
>> Kyle Simpson: This was my natural instinct. If I'm gonna use a .map, why not go ahead and try to use some other functional iterator like a .for each. Except there's a problem here.

And if you try it you'll get a syntax error, because the await keyword can't show up inside of a regular function. In just a few minutes, we'll talk about possible other strategies for that. But that's why we needed to use a regular for loop, is because we can't use the await keyword across that function boundary.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now