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

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 27 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today