在stenciljs中使用promise on button click

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  handleClick() {
    return new Promise((resolve, reject) => {
      // 异步操作的逻辑
      // 可以是一个API请求、数据库查询等

      // 模拟异步操作成功
      setTimeout(() => {
        const data = 'Promise resolved with data';
        resolve(data);
      }, 2000);

      // 模拟异步操作失败
      // setTimeout(() => {
      //   const error = 'Promise rejected with error';
      //   reject(error);
      // }, 2000);
    });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick().then((data) => console.log(data)).catch((error) => console.error(error))}>
          Click me
        </button>
      </div>
    );
  }
}