How do I yield a sequence of promises from an async iterator?

Question

I start with a function which renders and yields a sequence of image blobs.

async function* renderAll(): AsyncIterableIterator<Blob> {
  const canvases = await getCanvases();
  for (const canvas of canvases) {
    yield await new Promise<Blob>((resolve, reject) => {
      canvas.toBlob(result => { if (result) resolve(result); else reject(); });
    });
  }
}

That works fine, but the performance isn't ideal because each promise has to be resolved before starting on the next operation. Instead, the caller should decide when to wait for the promises, while still preserving the order.

async function* renderAll(): AsyncIterableIterator<Promise<Blob>> {
  const canvases = await getCanvases();
  for (const canvas of canvases) {
    yield new Promise<Blob>((resolve, reject) => {
      canvas.toBlob(result => { if (result) resolve(result); else reject(); });
    });
  }
}

To my surprise, this fails to compile because "Type Blob is not assignable to type Promise<Blob>." Further inspection shows that the yield operator unpacks promises within an async function, such that yield promise is functionally identical to yield await promise.

Why does the yield operator act this way? Is it possible to yield a sequence of promises from an async iterator?

piedar · Accepted Answer · 2017-12-01 21:25:16Z

3

To work around the surprising behavior of the yield operator, one possibility is to wrap the promise in a function.

async function* renderAll(): AsyncIterableIterator<() => Promise<Blob>> {
  const canvases = await getCanvases();
  for (const canvas of canvases) {
    yield () => new Promise<Blob>((resolve, reject) => {
      canvas.toBlob(result => { if (result) resolve(result); else reject(); });
    });
  }
}

I'm not sure if that's a good practice, but it does allow the caller to schedule the async work.

edited Dec 1, 2017 at 21:25

answered Nov 30, 2017 at 22:22

piedar

2,7511 gold badge30 silver badges38 bronze badges

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

Comments

Titian Cernicova-Dragomir · Accepted Answer · 2017-12-16 08:00:05Z

For some reason these two statements seem to have the same effect :

yield await promise
yield promise

The first statement actually compiles to yield yield __await(promise) in Javascript, which works as expected. I think the idea is that you should be able to return either an element of the iteration or a promise of an element, so the await is not really necessary

From my understanding of async iterator spec, it should be used in cases where the iteration itself is asynchronous, in your case the iteration itself is not asynchronous, it's more of an asynchronous method that returns an interation. I would go with:

async function renderAll(): Promise<Iterable<Promise<IBlob>>> {
    const canvases = await getCanvases();
    return (function* () {
        for (const canvas of canvases) {
            yield new Promise<IBlob>((resolve, reject) => {
                canvas.toBlob(result => { if (result) resolve(result); else reject(); });
            });
        }
    })();
}

OR

async function renderAll4(): Promise<Iterable<Promise<IBlob>>> {
    return (await getCanvases())
        .map(canvas => new Promise<IBlob>((resolve, reject) => {
                canvas.toBlob(result => { if (result) resolve(result); else reject(); });
            })
        );
}

Collectives™ on Stack Overflow

How do I yield a sequence of promises from an async iterator?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related