A Solveable Problem...

A Solveable Problem...

A Solveable Problem...

We could just make this code synchronous...

We want to write code
in a synchronous fashion,

but with the runtime benefits
of asynchronicity.

What are generators?

A mechanism for pausing (and resuming)
function execution.

Generators are NOT
asynchronous.

Let's look at some asynchronous code...

Long run complete
100 ms timeout!
        

JavaScript follows a
"run to completion" paradigm...

...along with an event-based asynchronous loop.

This code runs without stopping to the end...

setTimeout() causes an asynchronous callback after 100 ms...

...but this for loop will block the event loop until it's done.

Generators do not
solve this problem.

Generators allow functions to pause and resume execution!

Remember our synchronous code?

Async with generators...

I don't see any generators.

Wait for it...

Let's step back...

This is a generator.

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

This is a generator.

And this is how you execute it...

Inside foo
Outside foo
Back inside foo
        

This does not break the
"run to completion" paradigm!

Notice that my generator "yielded" two values:

Call the next() one last time...

{ value: 'a', done: false }
{ value: { b: 2 }, done: false }
{ value: undefined, done: true }
        

Adding a return statement:

const genObj = foo();
console.log( genObj.next() );
console.log( genObj.next() );
console.log( genObj.next() );
        

{ value: 'a', done: false }
{ value: { b: 2 }, done: false }
{ value: 'c', done: true }
        

Generators are Iterators

In fact, we can iterate (or loop) over them!

a
{ b: 2 }
            

A generator can receive
input with each yield

Receiving input from a yield

Error handling is easy.

Error handling is easy!

We just throw and catch Error objects.

If an error occurs outside the generator...

Oops! I did it again.
        

If an error occurs inside the generator...

Caught outside generator: Nope nope nope.
        

And finally...

Async with Generators

Tools We'll Need:

Generators (Obviously) and Promises

Yes, Promises.

Remember: generators are not asynchronous...

Generators are cumbersome...

1. Create the generator object
2. Call next() to start it
3. Get the value off the yielded object
4. Call next() over and over
5. Remember to use gen.throw()

Async generators

We want to abstract away their "Iterable" nature...

We need a . . .

Our simplified generator runner must...

1. Accept a generator function
2. Create the generator object
3. Call next()
4. Check if our generator is done
5. Wait for yielded Promise to resolve / reject
6. Throw errors on Promise rejection
7. Rinse & repeat (3-6)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

(Warning: do not use this code! It is not complete.)

Let's see it in action

{ "foo": "bar", "nextIndex": 2, "message": "Generators" }
{ "foo": "bat", "nextIndex": 5, "message": "are" }
{ "foo": "baz", "nextIndex": null, "message": "cool" }
        

But is it really asynchronous?

{ "foo": "bar", "nextIndex": 2, "message": "Generators" }
100 ms timeout!
{ "foo": "bat", "nextIndex": 5, "message": "are" }
{ "foo": "baz", "nextIndex": null, "message": "cool" }
        

What about errors?!

ERROR! ENOENT, open 'data-infinity.json'
Retrieved data: [ '{ "foo": "bar", "nextIndex": 2 }',
                  '{ "foo": "bat", "nextIndex": 5 }' ]
        

async and await

async function getData() {
  try {

    const one = JSON.parse(await readFile('data-1.json'));
    const two = JSON.parse(await readFile('data-' + one.nextIndex + '.json'));
    const three = JSON.parse(await readFile('data-' + two.nextIndex + '.json'));

  } catch(err) {
    // Handle the error...
  }
}
        

This looks familiar...

Because it is!

async functions are based on "pausing" in generators

and await requires a Promise!