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.

Preview
Close

Transcript from the "Async Await Solution" Lesson

[00:00:00]
>> 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]).

[00:00:36]
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.

[00:01:05]
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.

[00:01:30]
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, = files.map.

[00:01:51]
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.

[00:02:14]
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.

[00:02:42]
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.

[00:03:03]
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.

[00:03:24]
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