asynchronous - Can I use asyncawait to wait for multiple events in JavaScript? - Stack Overflow

admin管理员组

文章数量:1304049

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 setup event callbacks on the api variable inside the async function, trigger the api.load() function, and then return the event that happened first, in this case either eventOne|eventTwo|eventThree

Problem is, this syntax is bad, and this example does not work. I couldn't find any way to achieve this using async/await and had to revert 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 acplished using async/await? Anyway this can be done using the new async/await es7 syntax?

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 setup event callbacks on the api variable inside the async function, trigger the api.load() function, and then return the event that happened first, in this case either eventOne|eventTwo|eventThree

Problem is, this syntax is bad, and this example does not work. I couldn't find any way to achieve this using async/await and had to revert 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 acplished using async/await? Anyway this can be done using the new async/await es7 syntax?

• javascript
• asynchronous
• async-await
• ecmascript-2017

Share Improve this question Follow edited May 3, 2017 at 6:16 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked May 2, 2017 at 20:59 aaaaaa 60166 silver badges1313 bronze badges 4

• One problem is that your return statements are returning their value from their specific event handler functions, not the main waitForEvent function – Will P. Commented May 2, 2017 at 21:03
• Of course, I know that :) thanks for pointing that out. I am trying to figure a way to go around that. – aaa Commented May 2, 2017 at 21:07
• I don't get what you mean by "I had to revert to promises". async/await uses promises anyway? And if api is not promisified, you need to use the Promise constructor. – Bergi Commented May 2, 2017 at 21:55
• What's the meaning of eventOne, eventTwo, eventThree? Is it "one of them" or "any number of them in any order" or "all 3 in a random order"? I'm asking because maybe promises are not the best abstraction for your problem. – Kos Commented Aug 23, 2017 at 9:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Since async/await allows us to write async constructs in a synchronous-looking manner (lexical top-down), there isn't really a specific approach to execute 3 different lines of code (or more accurately, statements) simultaneously.

The ideal api for this is the Promise.race.

First you convert your api callback into returning a promise:

const apiPromiseBuilder = (api) => (eventName) => new Promise(resolve => api.on(eventName, () => {
  resolve(eventName);
}));

Then you race 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;
};

本文标签： asynchronousCan I use asyncawait to wait for multiple events in JavaScriptStack Overflow