Truly understanding Async/Await
Rafael Vidaurre
1.1K7

Well, seeing title like “You know what it does, but do you know how it does it?” I was hoping to read about generators and how this syntactic sugar works under the hood.

Basically async/await magic could be represented using combination of generators+promises.

Below you can see very rough and high-level example of how this magic happens.

// wrapper for async functions where actions can be yield-ed
const asyncFn = generator => {
const iter = generator();
    const handleNext = val => {
const res = iter.next(val);
if(res.done)
return res.value;
else
return Promise.resolve(res.value).then(handleNext);
}
    handleNext();
}
// any async action (e.g. fetch())
const asyncAction = val => Promise.resolve(val);
// generator function
// you may treat these yield-s like await-s
function* incrementer() {
let nextVal = yield asyncAction(1);
console.log(nextVal);
    nextVal = yield asyncAction(++nextVal);
console.log(nextVal);

nextVal = yield asyncAction(++nextVal);
console.log(nextVal);
    nextVal = yield ++nextVal;
console.log(nextVal);
}
// consider it like `async incrementer() {...}`
asyncFn(incrementer);

So this pause effect on `await sthAsync()` is possible because of “yield” statements, which in their turn are syntactic sugar as well (but it’s different story).