Is it possible to use Async Generators with the ES5 syntax?

Question

For example, the code below that creates a async Generator:

async function* iterate() {
    yield 1;
    yield 2;
    yield 3;
    return null;
}

Could be used with the syntax for await...of:

for await (const iteration of iterate()) {
    console.log(iteration); // 1, 2, 3
}

The code that generates the iterator is from a library that uses Typescript, so it can be easily transposed into other versions of Ecmascript. But I want to use this third-party code without needing a transpilation process, maintaining compatibility with older browsers, how to use this code with ES5 syntax?

I made a test transpiring both this function and the loop that uses it, but a complex code is used with the help of various functions, making it difficult to understand and maintain

Answer 1

Is it possible? Is it. Is it feasible? No. Basically, you have to create you a function that is the awaiter and another one that is the Generator and then flames one inside the other with the final callback being what you want to make it happen.

Is not nothingness simple. And I can’t figure out what you’d get out of it, when you can just do the code on ES6 and tell transpiler to get you the browser version that doesn’t support that javascript version

Alternatively, use polyfills for this; both the core-js like the async-polyfill can help.

Answer 2

• It is possible, simply, through recursion instead of using a loop. I created the function asyncForeach, that receives an iterator and a callback function that will be executed at the end of each promise, at that point, just call the function again if that iterator has not finished

async function* iterate() {
    yield new Promise(resolve => setTimeout(resolve, 1000, 1));
    yield new Promise(resolve => setTimeout(resolve, 1000, 2));;
    yield new Promise(resolve => setTimeout(resolve, 1000, 3));;
    return null;
}

function asyncForeach(iterator, callback) {
    iterator.next().then(function(cursor) {
        if (!cursor.done) {
            callback(cursor.value)

            asyncForeach(iterator, callback);
        }
    });
}

asyncForeach(iterate(), console.log);

console.log('finish');

However, its function is slightly different from the syntax for await...of:

(async () => {
    async function* iterate() {
        yield new Promise(resolve => setTimeout(resolve, 1000, 1));
        yield new Promise(resolve => setTimeout(resolve, 1000, 2));
        yield new Promise(resolve => setTimeout(resolve, 1000, 3));
        return null;
    }

    for await (const iteration of iterate())
        console.log(iteration);

    console.log('finish');
})();

• You can also create something similar using the ES6 syntax and transpose to an earlier version using any online playground with Typescript, Babel, Rollup or similar, and copy the result into your code:

function asyncForeach(iterator, callback) {
    for await (const iteration of iterator)
        callback(iteration);
}

So it is not necessary to add a build process, but to update this code, it would take a certain rework when tidying the settings, although this piece of code will hardly need maintenance, since it is something very simple that can use any iterator

• If feasible and advantageous, a build process can be added to just that piece of code, but it’s not always

• Another option is to use the ES6 syntax and only transpose the required code at runtime, but this is not recommended, since the same process will be repeated several times to each page re-load unnecessarily

• Finally, it would use some utility library that has a function like the one above and is compatible with ES5, but I don’t know any