Javascript：检查是否通过承诺定义了多个自定义元素

希望以前没有人问过这个问题——我很难想出如何用词来表达这个问题

我在玩弄Vaadin的日期和时间选择器-该示例中显示了一个处理日期范围的示例，

customElements。当定义（'Vaadin-date-picker'）时，

用于确保元素存在

我感兴趣的是将日期选择器与时间选择器相结合，本质上是创建一个日期/时间范围选择器。因此，我需要检查

vaadin日期选择器

和

vaadin时间选择器

是否存在

处理这种联合检查的“正确”方法或最佳实践是什么

我的第一个猜测是：

customElements.whenDefined('vaadin-date-picker').whenDefined('vaadin-time-picker').then...

但是，据我所知，没有任何例子显示这种方法，因此我怀疑它要么不正确，要么只是一个不常见的问题。我认为可行的解决办法是

customElements.whenDefined('vaadin-date-picker').then(function() { 
  customElements.whenDefined('vaadin-time-picker').then(function() {
    // insert code here...
  });
});

---

但这似乎很不雅观。

一种选择是使用

承诺。所有的
都是从两个原始承诺中创建一个承诺：

Promise.all([
    customElements.whenDefined('vaadin-date-picker'),
    customElements.whenDefined('vaadin-time-picker')
  ]).then(function() {
  // Do something
});

另一种更优雅的选择是使用
async
函数执行所有操作。然后，您可以在继续之前分别等待每个承诺

(async () => {
  await customElements.whenDefined('vaadin-date-picker');
  await customElements.whenDefined('vaadin-time-picker');
  // Do something
})();

如果您已经在一个不需要立即返回任何内容的函数中，那么您可以将该函数标记为
async
，而不是像我的示例中那样执行伪lambda包装