How can I use Async Generators in JavaScript?

Question

I have an api thats going to return a cursor for fetching more data. I've mocked it out like this:

function fetch(n) {
  return Promise.resolve({
    results: [n],
    next: next < 10 && n + 1,
  })
}

What I'm trying to do is figure out how I can use async/await along with generators in order to interact with this api.

Here's basically what I've prototyped:

async function* api(url) {
  let result = await fetch(url)
  yield result
  while (result.next) {
    result = await fetch(result.next)
    yield result
  }
}

The idea is that I should be able to create an async generator and yield from that generator in order to iterate through the cursor:

async function main() {
  const gen = api(0)
  const zero = await gen.next()
  console.log(zero.result)
  const one = await gen.next()
  console.log(one.result)
  const rest = await Promise.all([...gen])
  console.log(rest.map(r => r.result))
}

All things considered, I think this is a pretty sweet way of handling paginated data and being able to pull out all of the data with [...gen] is pretty damn cool.

Only problem is, it doesn't work! Apprently you can't use async with function*:

❯❯❯ node --version
v7.0.0
❯❯❯ node --harmony --harmony-async-await async-generator.js
/Users/chetcorcos/code/async-generator.js:11
async function* api(url) {
              ^
SyntaxError: Unexpected token *
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3

But I really feel like this should be possible. There's a popular library called co that I've been poking around with but I don't think that's what I want.

Any ideas how to get this concept of "async generators" to work?

Have a look at the upcoming proposal github.com/tc39/proposal-async-iteration . You can use it with Babel's babel-plugin-transform-async-generator-functions transform — Felix Kling
– Felix Kling, Commented Dec 27, 2016 at 19:14
@guest271314 not necessarily part of the requirement -- I've been playing around trying to make it happen without the keywords, but its been a struggle. — Chet
– Chet, Commented Dec 27, 2016 at 19:30
you can down-compile with typescript or simply run natively with nodejs9 with the --harmony flag: stackoverflow.com/questions/43694281/… — Meirion Hughes
– Meirion Hughes, Commented Dec 15, 2017 at 10:42

sdgfsdh · Accepted Answer · 2017-12-15 10:34:31Z

2

You can do this using the Babel plugin transform-async-generator-functions.

The usage is like this:

const g = async i => [ 1, 2, 3 ]
  .map(x => x * 10 ** i);

const f = async function * () {
  for (let i = 0; i < 10; i++) {
    const xs = await g(i);
    for (const x of xs) {
      yield x;
    }
  }
};

const main = async () => {
  for await (const x of f()) {
    console.log(x);
  }
};

main().catch(e => console.error(e));

Here is an example repo showing how to setup your project.

The important part is the .babelrc file:

{
  "presets": [ "env" ], 
  "plugins": [ "transform-async-generator-functions" ]
 }

answered Dec 15, 2017 at 10:34

sdgfsdh

37.8k31 gold badges168 silver badges299 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2016-12-27 20:46:37Z

0

You can pass call the generator function as parameter to without using spread element, Promise.all() accepts an iterable as parameter which yield returns. Note, Promise.all() does not resolve or reject the passed Promise objects in sequential order, though does return the resulting array in same order as the elements within passed iterable.

let api = (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(value)
    }, Math.floor(Math.random() * 3500))
  })
};

let values = [1, 2, 3];
let results = [];
let gen = function* gen(fn, props) {
  let i = 0; 
  do {
    yield fn(props[i]).then(res => {console.log(res); return res});
    ++i;
  } while (i < props.length);
}

Promise.all(gen(api, values))
.then(data => console.log("complete:", data))
.catch(err => console.log(err));

edited Dec 27, 2016 at 20:46

answered Dec 27, 2016 at 19:50

guest271314

1

1 Comment

Zach Smith Over a year ago

This looks like it could be a good answer... but the wording is unclear: "You can pass call the generator function as parameter to without using spread element"

Collectives™ on Stack Overflow

How can I use Async Generators in JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related