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?

Answer 1

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(); });
            })
        );
}

Answer 2

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.