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

Question

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

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

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

处理此组合检查的 'correct' 方法或最佳做法是什么？

我的第一个猜测是：

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.all([
    customElements.whenDefined('vaadin-date-picker'),
    customElements.whenDefined('vaadin-time-picker')
  ]).then(function() {
  // Do something
});

另一种更优雅的替代方法是在 async 函数中完成所有操作。然后您可以 await 在继续之前分别承诺每个承诺。

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

如果你已经在一个不需要立即 return 任何东西的函数中，那么你可以将该函数标记为 async 而不是像我的那样做一个虚拟的 lambda 包装器例如。

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

Javascript: Checking if multiple custom elements are defined via Promises

javascript

vaadin

web-component