Async/Await implementation with generator and promise.

Async/Await implementation with generator and promise.

Learn about JS async in depth

To achieve this, familiarity with promises and the workings of the js event loop/asynchronicity is necessary. This video covers these topics well. Needless to say you should know about generator functions too.
You can learn about generators in my article here.

A simple js async function

async function getStockAnalysis(){
 const data = await fetch('https://stocks.com/today/global/top100')
 console.log(data)
}
getStockAnalysis()

Now let's recreate this simple async/await program without using async and await. We can achieve this with the help of a generator and promise.

function doWhenDataReceived (value){
 returnNextElement.next(value)
}
function* getStockAnalysis(){
 const data = yield fetch('https://stocks.com/today/global/top100')
 console.log(data)  // prints data
}
const returnNextElement = getStockAnalysis()
const futureData = returnNextElement.next() //promise object
futureData.value.then(doWhenDataReceived)
// waiting for promise resolution since end of EOF.
// if resolution is successful the line commented as prints data gets executed.

Here generator function is assigned to returnNextElement. When it is called in the next line with .next(), the fetch will return a promise object, the futureData will store the yielded value in this from {value: Promise, done: false} and the generater function getStockAnalysis() is paused now.

In the line futureData.value.then(doWhenDataReceived) we will assign doWhenDataReceived to Promise.then() i.e., microtask queue so that it will run after the promise resolves to success.
If successful and microtask queue runs this, doWhenDataReceived will resume the getStockAnalysis() and pass the value fetched. Now finally console.log(data) gets executed.