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

Question

考虑以下情况：

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


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


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

  api.load();
}

我想做的是在异步函数内的 api 变量上设置事件回调，触发 api.load() 函数，然后 return 先发生的事件，在这种情况下 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 语法来完成吗？

Answer 1

由于 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;
};

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

Can I use async/await to wait for multiple events in JavaScript?

javascript

asynchronous

async-await

ecmascript-2017