How to use "await" for a generator function is ES6?

Question

The issue

I'm curious if it would be possible to consume a generator-function in async/await context within modern ES2017. (The application is a React-native-application)

This is my code where I want to call the generator function:

class ProductViewComponent extends Component {

  async componentDidMount() {
    const result = await loadProduct(...)
    console.log(result)  // Gives: *Generator* and not the final result
  }

}

The function loadProduct() was imported from another file and is defined as follows:

export function * loadProduct(id) {

   let product = yield select(productByIdSelector(id));
   if(!product) {
      // ... yield this
      // ... yield that
      // ... finally:
      product = yield call(loadProductFromWeb, id) 
   }
   return product;
}  

The concrete question:

As far as I know I can use await to await results from Promises. How can I use generator functions in this context?

Answer 1

From the looks of it its a coroutine yielding (some) promises. Assuming the real result is simply the last result of the coroutine, and you cannot change the generator code, you can iterate the generator and await everything - Promises will be awaited and undefineds will be ignored.

async componentDidMount() {
  const resultGenerator = loadProduct(...);

  let result;

  for (let task of resultGenerator) {
    result = await task ;
  }

  console.log(result); // should be last result of coroutine
}