首页 文章

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

提问于
浏览
4

考虑以下情况:

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

问题是,这个语法是 bad ,这个例子不起作用 . 我找不到任何方法来实现这一点使用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语法来完成?

1 回答

  • 7

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

相关问题