Javascript:检查是否通过 Promises 定义了多个自定义元素

Question

希望之前没有人问过这个问题——我很难弄清楚如何用这个问题来表达这个问题。

我正在使用 Vaadin 的日期和时间选择器 - 此处显示了一个处理日期范围的示例 https://vaadin.com/components/vaadin-date-picker/html-examples在该示例中，customElements.whenDefined('vaadin-date-picker')... 用于确保元素存在。

我有兴趣将日期选择器与时间选择器结合起来，本质上是制作一个日期/时间范围选择器。因此，我需要检查 vaadin-date-picker 和 vaadin-time-picker 是否存在。

处理此组合检查的“正确”方法或最佳做法是什么？

我的第一个猜测是:

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...
  });
});

但这看起来很不优雅。

Answer 1

一种选择是使用 Promise.all 从两个原始 promise 中创建一个 promise :

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

另一种更优雅的替代方法是在 async 函数中执行所有操作。然后您可以在继续之前分别等待每个 promise 。

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

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