我可以使用async / await等待JavaScript中的多个事件吗？

考虑以下情况：

const waitForEvent = async (api) => {
  api.on('eventOne', () => {
    return 'eventOne';
  })


  api.on('eventTwo', () => {
    return 'eventTwo';
  })


  api.on('eventThree', () => {
    return 'eventThree';
  })

  api.load();
}

我要做的是在异步函数内的api变量上设置事件回调,触发api.load()函数,然后返回先发生的事件,在这种情况下要么是eventOne | eventTwo | eventThree

问题是,这种语法很糟糕,这个例子不起作用.我找不到任何方法来实现这个使用async / await并且不得不恢复到这样的承诺：

const waitForEvent = (api) => {
  return new Promise(resolve) => {
    api.on('eventOne', () => {
      resolve('eventOne');
    })


    api.on('eventTwo', () => {
      resolve('eventTwo');
    })


    api.on('eventThree', () => {
      resolve('eventThree');
    })

    api.load();
  }
}

所以我的问题是,这可以使用async / await来完成吗？无论如何,这可以使用新的async / await es7语法来完成？

解决方法:

由于async / await允许我们以同步方式(自上而下的词汇)编写异步构造,因此没有一种特定的方法可以同时执行3行不同的代码(或更准确地说,语句).

理想的api是Promise.race.

首先,将您的api回调转换为返回承诺：

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

然后你比赛你需要的所有事件：

const waitForEvent = (api) => {

  const apiPromise = apiPromiseBuilder(api);

  const promiseRace = Promise.race([
    apiPromise('eventOne'),
    apiPromise('eventTwo'),
    apiPromise('eventThree')
  ]);

  api.load();

  return promiseRace;
};

或者使用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;
};

标签：javascript,asynchronous,async-await,ecmascript-2017
来源： https://codeday.me/bug/20190611/1217562.html