Handling synchronous flow in async generators JS

Question

I am implementing a generator into my logic and it is not clear for me

function *generator {
    yield synchronousFunc()
    yield asyncFunc()
    // should wait till asyncFunc() is completed 
    // before calling next yield
    yield anotherSynchronousFunc() 
    yield ...
}

how will it work if I convert this generator to async generator with async/await for

for await (const item of generator()) {}

when most of the yields are synchronous.

How async generator will handle the synchronous part of the yields under the hood?

Maybe it is a silly question, but I'm trying to understand how generators works

Answer 1

You should put an async keyword in front of your generator to convert it to an async generator.

Here is an example you can run

 async function* asyncGenerator() { yield 1 yield 2 yield Promise.resolve(3) yield 4 yield 5 } (async () => { for await (const n of asyncGenerator()) { console.log(n) } })()

This resource helped me develop my intuition on generators and async generators.

With regards to how async generators work under the hood, it has less to do with generators and more to do with async and await. Here is async/await under the hood

Unless you are running a lot of cpu intensive workloads in your redux-saga generators, you should be fine to not worry about the extra promise wrapping that occurs with async generators, even if most of your code is sync.