Generator in JavaScript not working due to being wrapped in an async request

Question

I want to return a generator for the cars being created. The issue is, I nest an API to receive some random colours for the cars upon which I cannot yield to since they're not declared as generator functions.

I tried to create the reference using let car but because the request is async, it yields before the car is instanced. Perhaps I need to pass this as reference? Any ideas?

static async api()
{
    return (await fetch('http://www.colr.org/json/colors/random/8')).json();
}

static* createCars(n)
{
    for(let i = 1; i <= n; i++) {
        Car.api().then(resp => {
            let car = (new self({
                x: 0,
                y: 250,
                colour: "#" + resp.colors[3].hex,
                windowsColour: "#" + resp.colors[2].hex,
                number: i
            })).draw();
        });
        
        yield car;
    }
}

Uncaught ReferenceError: car is not defined

Related: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Code-Apprentice, Feb 23 '21 at 23:32
I want the request to stay `async` - I understand that if I wait, it removes the issue @Code-Apprentice — Jaquarh, Feb 23 '21 at 23:33
Yup, that's why I commented as "related" rather than closing as a dupe. If I understand correctly, you want an async fetch for each car. Do you care what order they yield when the response comes back? — Code-Apprentice, Feb 23 '21 at 23:38

score 3 · Accepted Answer · answered Feb 23 '21 at 23:36

Use an async generator instead, so that you can await in the main body of the generator function. This allows you to retrieve the asynchronous value at the top level of the function, so you can yield it. (You can't yield inside callbacks, after all.)

class Car {
  static async api() {
    return (await fetch('http://www.colr.org/json/colors/random/8')).json();
  }

  static async * createCars(n) {
    for (let i = 1; i <= n; i++) {
      const resp = await Car.api();
      /*
          let car = (new self({
              x: 0,
              y: 250,
              colour: "#" + resp.colors[3].hex,
              windowsColour: "#" + resp.colors[2].hex,
              number: i
          })).draw();
          yield car;
      */
      yield "#" + resp.colors[3].hex;

    }
  }
}

(async () => {
  for await (const color of Car.createCars(1)) {
    console.log(color);
  }
})();

Note that colr.org has standard CORS protections, so you can't fetch to it from a different domain on the front-end - you'll either need to request a different working endpoint, or bounce the request off your own server, or something like that.

score 1 · Answer 2 · answered Feb 23 '21 at 23:36

One solution is to do

const resp = await Care.api();
const car = (new self({
                x: 0,
                y: 250,
                colour: "#" + resp.colors[3].hex,
                windowsColour: "#" + resp.colors[2].hex,
                number: i
            })).draw();
yield car;

This should at least get you closer to something that actually works.

The disadvantage is that it blocks for each request rather than letting each one resolve asynchronously. I still think it's a good place to start to at least see if your code works the way you want. Then follow up with some modifications to correctly take advantage of async API calls. (I don't know the exact solution for that next step off the top of my head, though.)

Generator in JavaScript not working due to being wrapped in an async request

2 Answers2