Can I use async / await to wait for multiple events in JavaScript?
Consider the following case:
const waitForEvent = async (api) => {
api.on('eventOne', () => {
return 'eventOne';
})
api.on('eventTwo', () => {
return 'eventTwo';
})
api.on('eventThree', () => {
return 'eventThree';
})
api.load();
}
What I am trying to do is set up event callbacks on a variable api
inside the async function, fire the function api.load()
, then return the event that happened first, in this case eithereventOne|eventTwo|eventThree
The problem is that this syntax is bad and this example doesn't work. I couldn't find any way to achieve this using async / await and had to fall back to promises like this:
const waitForEvent = (api) => {
return new Promise(resolve) => {
api.on('eventOne', () => {
resolve('eventOne');
})
api.on('eventTwo', () => {
resolve('eventTwo');
})
api.on('eventThree', () => {
resolve('eventThree');
})
api.load();
}
}
So my question is, can this be accomplished with async / await? Is there anyway this can be done using the new esync / await es7 syntax?
source to share
Since it async/await
allows asynchronous constructs to be written synchronously (lexically from top to bottom), there is no special approach to executing three different lines of code (or, more precisely, statements) simultaneously.
The ideal api for this is Promise.race
.
First, you convert the api callback to a response:
const apiPromiseBuilder = (api) => (eventName) => new Promise(resolve => api.on(eventName, () => {
resolve(eventName);
}));
Then you fire all the events you need:
const waitForEvent = (api) => {
const apiPromise = apiPromiseBuilder(api);
const promiseRace = Promise.race([
apiPromise('eventOne'),
apiPromise('eventTwo'),
apiPromise('eventThree')
]);
api.load();
return promiseRace;
};
Or using async/await
:
async function waitForEvent(api) {
const apiPromise = apiPromiseBuilder(api);
const promiseRace = Promise.race([
apiPromise('eventOne'),
apiPromise('eventTwo'),
apiPromise('eventThree')
]);
api.load();
const firstResult = await promiseRace;
return firstResult;
};
source to share