Is there a way to write async await code that responds to onkeypress events?

Question

I'd like to write a readKey function that's async, and then await each key being pressed in the browser.

I'd like to build this up into synchronous, normal-looking code that's all based on async-await.

So then I could write a readLine function that does await readKey() until the user hits [enter], and delete the last key if the user hits [back], etc.

And then I could write functions that await readLine(), and write functions that call them, etc.

I just don't know how to bridge the gap between writing a document.onkeypress handler... and putting the keys in that event into some async readKey function that I'd write. In other languages, I could use other multi-threading primitives to get there, but I can't figure out how to in js. I was trying to figure out if there was some way to yield the value, but I can't see how to do that, either.

Answer 1

Yes. Let's break it down:

Is it possible to await a custom thing?

Yes — you can await any Promise. For example, to wait for a timeout:

const timerPromise = new Promise(resolve => setTimeout(resolve, 1000));
await timerPromise;

Is it possible to have a promise for a key press?

Yes — resolve the promise when an event happens.

function readKey() {
    return new Promise(resolve => {
        window.addEventListener('keypress', resolve, {once:true});
    });
}