Generators can yield promises which can work with the "for await of" loop syntax. This lesson shows how all the pieces fit together and explains why the `async function*` syntax can be necessary for certain situations.

https://app.egghead.io/api/v1/lessons/javascript-create-an-async-generator-and-loop-through-generated-promises-with-for-await-of-loops/subtitles

Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops

John Lindquist: [00:00] Instead of iterating through an array, we can iterate through an iterable, which we'll call numbers(). Just yield 1 and yield 2. If we change promises to invoking numbers and just rename promise to num, hit save and you'll see 1 and 2.

[00:18] We can also yield out Promises. If I yield out a new Promise, just takes a resolve. After three seconds, it invokes resolve(3). We'll get the same scenario we had last time where after three seconds, you'll see 3.

[00:35] If you're working with something like data where you want to yield a fetch, grab some data from the GitHub API, we'll grab the users/johnLindquist, save here. You'll see we do get a response, but the data is locked inside of a body which is a readable stream.

[00:52] In this case, it might make more sense for us to grab this, cut this and name this response and await the result of that fetch.

[01:03] Because we're using await, we have to put async up here. Then we can await the response.json(). Hit save there and now you'll see we have the data. Let's rename these. We'll rename these to users and rename number to user and describe the user.name, hit save, you'll see John Lindquist.

[01:23] We can do the same thing here. Duplicate this and grab the data from egghead.io. You'll see the name of that user is egghead.io. Instead of duplicating ourselves, let's just cut this out, make an array of names, which can just be "johnLindquist" and "eggheadio".

[01:42] We can for of over the names, so let name of names, then fetch each name appended to the GitHub API, api.github.com/users/${name}. We can await this, call that response, then yield the response.json, which is a promise, and this await will handle the promise. Let's save there.

[02:05] You'll see John Lindquist and then egghead.io. Now you can just add more names to the array and fetch as much as you want.

Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops

Share this video with your friends