What is preventing yield from resolving a promise?

Question

What is preventing yield from resolving a promise?

Here is the code snippet I am working with:

object = {
    getPastEvents: () => Promise.resolve([1,2,3])
}

function* fetchPastEvents() {
    const values = yield object.getPastEvents()
    console.log(values)
}

const events = fetchPastEvents()
events.next()
events.next()

My goal now is to figure out how to update the function getPastEvents so that it returns a specific set of values. Currently, the values are undefined. I initially believed that using yield would handle resolving a promise similar to async await.

javascript ecmascript-6 yield

Answer 1

Answer №1

When you invoke the .next method, you continue the execution of the generator function. If you wish to resume it with a specific value, you can pass that value into the .next method. To replicate the behavior of redux-saga in resolving promises and then resuming the generator, you'll need to retrieve the promise yielded by the initial call to .next, wait for the promise to resolve using its .then method, and then call .next with the resolved value.

const object = {
  getPastEvents: () => Promise.resolve([1,2,3])
}

function* fetchPastEvents() {
  console.log("entry")
  const values = yield object.getPastEvents()
  console.log(values)
}

const iterator = fetchPastEvents()
const promise = iterator.next().value;
promise.then(val => iterator.next(val))

I would advise against trying to implement this manually. If this is indeed a saga as you mentioned, consider running it through redux saga where this functionality is included. Alternatively, you could explore the co library which offers similar features.

Answer 2

When you invoke the .next method, you continue the execution of the generator function. If you wish to resume it with a specific value, you can pass that value into the .next method. To replicate the behavior of redux-saga in resolving promises and then resuming the generator, you'll need to retrieve the promise yielded by the initial call to .next, wait for the promise to resolve using its .then method, and then call .next with the resolved value.

const object = {
  getPastEvents: () => Promise.resolve([1,2,3])
}

function* fetchPastEvents() {
  console.log("entry")
  const values = yield object.getPastEvents()
  console.log(values)
}

const iterator = fetchPastEvents()
const promise = iterator.next().value;
promise.then(val => iterator.next(val))

I would advise against trying to implement this manually. If this is indeed a saga as you mentioned, consider running it through redux saga where this functionality is included. Alternatively, you could explore the co library which offers similar features.

Answer 3

Answer №2

My understanding was that using yield is similar to resolving a promise like with async await.

In reality, yield is specifically used for pausing a generator function, causing the function's execution to stop at that point. It then returns the expression on the right side to the caller of .next(), and waits until the next .next(value) call to continue executing. This process can seem asynchronous, but it is unrelated to utilizing async / await. Although, it is possible to yield a promise and resume execution once the promise resolves by calling .next(value):

 async function co(generator) {
   let iterator = generator();
   let done, value;
   do {
     ({ done, value } = iterator.next(await value);
   } while(!done);
   return value;
}

This functionality can be implemented in such a way:

 co(function* doAsync() {
   let result = yield somePromise();
   console.log(result);
});

However, it may not always be practical given the existence of async generators designed precisely for this purpose.

Answer 4

My understanding was that using yield is similar to resolving a promise like with async await.

In reality, yield is specifically used for pausing a generator function, causing the function's execution to stop at that point. It then returns the expression on the right side to the caller of .next(), and waits until the next .next(value) call to continue executing. This process can seem asynchronous, but it is unrelated to utilizing async / await. Although, it is possible to yield a promise and resume execution once the promise resolves by calling .next(value):

 async function co(generator) {
   let iterator = generator();
   let done, value;
   do {
     ({ done, value } = iterator.next(await value);
   } while(!done);
   return value;
}

This functionality can be implemented in such a way:

 co(function* doAsync() {
   let result = yield somePromise();
   console.log(result);
});

However, it may not always be practical given the existence of async generators designed precisely for this purpose.

Answer 5

Answer №3

When using yield in a generator, it does not always wait until a promise is fulfilled.

In order to make the example work, you need to write code that invokes the next method of an object implementing the iterable protocol.


function runGenerator(asyncGen) {
    const gen = asyncGen();
    let returnValue;

    (function iterate(value){
        returnValue = gen.next(value);

        if(!returnValue.done) {
            returnValue.value.then(iterate);
        }
    })();
}

const object = {
    getPastEvents: () => Promise.resolve([1,2,3])
};

runGenerator(function*() {
    const values = yield object.getPastEvents();
    console.log(values);
});

Please note that this is a basic implementation and more conditions should be checked for use in actual projects.

Instead of creating your own implementation, consider using the co module.

It's important to know that Async & Await follows a similar approach, both requiring promisified APIs.

For Async & Await to work, ensure your JavaScript engine supports it, or transpile the code to work on older engines.

Generators will work on most modern JavaScript engines, as it is based on an older specification (ES6).

Transpiling Async & Await can lead to larger code size, which may impact content optimization goals.

A key difference between ES6 Generators and ES7 Async & Await is that ES6 Generators cannot use Arrow functions, which may be crucial in certain situations (as you need to store the "this" reference before entering the generator context), whereas ES7 Async Functions can utilize them.

Note that while ES7 Async & Await is syntactic sugar for promises, ES6 generators are not.

Answer 6

When using yield in a generator, it does not always wait until a promise is fulfilled.

In order to make the example work, you need to write code that invokes the next method of an object implementing the iterable protocol.


function runGenerator(asyncGen) {
    const gen = asyncGen();
    let returnValue;

    (function iterate(value){
        returnValue = gen.next(value);

        if(!returnValue.done) {
            returnValue.value.then(iterate);
        }
    })();
}

const object = {
    getPastEvents: () => Promise.resolve([1,2,3])
};

runGenerator(function*() {
    const values = yield object.getPastEvents();
    console.log(values);
});