![The Hard Parts of Asynchronous JavaScript](https://static.frontendmasters.com/assets/courses/2018-07-10-javascript-new-hard-parts/thumb.webp)
Check out a free preview of the full The Hard Parts of Asynchronous JavaScript course
The "Introducing Async Generators" Lesson is part of the full, The Hard Parts of Asynchronous JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
After reviewing generators, Will introduces the concept of asychronous generators.
Transcript from the "Introducing Async Generators" Lesson
[00:00:00]
>> Will Sentance: Return next element a special object with the next property on it, a method that when that is record runs, starts or continues the cornea create flow is where it was born. It was born by create flow and so it has this ability to go and execute that function, and then continue executing it by holding on to to the memory in that function execution context and position in that function execution context and then returning to that.
[00:00:32]
It hits yield and returns out of the value being yielded, pauses also rests this context just holds on to it. Here, we end up with a stream flow of values we get one by one by running return NextElement.net, next element, the next element, but look how dynamic can we control what they are.
[00:00:53]
Every time you see the yield keyword the next thing is expression is gonna evaluate to our next element in the flow of elements coming out of our a flow. And those flows, those functions that give us an [INAUDIBLE] From the flow are known as iterators. Okay? There we go.
[00:01:18]
All right, anything that gives a flow element by element. It's technically known as an iterator. I prefer to think of it as being a flow of elements that we just grab one by one by running a function. Switch on the tap, get the next element, switch on the tap, next element.
[00:01:31]
But here we're producing that flow by running through a function hitting a yield statement giving that as the next element in the flow. Continue, yield statement, next element to the flow. Go back in, continue yield statement, next element of the flow. We're now running functionality to give, to generate annex element of our flow.
[00:01:49]
That also means we get to control the return, manually ourselves into a function that execution context. What method Ben do we call to initiate us going back into the execution context?
>> Ben: .next.
>> Will Sentance: .next. We now have manual control of how to return back into a function execution context for the first time ever.
[00:02:11]
All we needed to add by the way, is the ability to track the position we're in and probably some other stuff under the hood to do that, but that is essentially what we are adding. We are very use to persisting state from a prior execution context as a backpack of data.
[00:02:26]
Now we also possessed the position at which we exited the function execution context to allow us to head back in. But that's super powerful. We're now getting to suspend a function being run and then return to continue running its body of code. By calling the next method that takes us back in.
[00:02:43]
We manually control when we return back to run code. So what if we could use that to handle asynchronicity? We could initiate a task that takes a long time. For example, requesting data from a server. Set it up, use the yield keyword to have that be the return promise object.
[00:03:04]
Be stored out here in some way and throw us out the execution context. Then continue running through add code including attaching some functionality be also triggered. When that promise gets its value back, and what if that trigger functionality inside of it contained a call to next, that took us back in?
[00:03:27]
To continue running our code with its value being passed back in, the value from the return request, the response object that came back from into the promise value. Wow, and that is exactly what we're gonna do here. We can use the ability to pause createFlow's running and then restart it only when our data returns.
[00:03:49]
We get control when we return back to createFlow and continue by setting up the trigger to do so, which is the next method. To be run by our function that was triggered by the promises resolution when the value returned from Twitter. It's a little bit of a sort of loopy back and forwards.
[00:04:05]
It's all gonna be automated by a sync await. But we're gonna build a sync await from scratch using this generator function concept. And then we're gonna tidy it up, wrap it up. Using a simple way, which is gonna automate a few of the pieces. This is our final code.
[00:04:21]
These last two sides are our final code.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops