在 lit-element Web 组件中获取异步数据

Question

我正在学习如何使用 fetch API 和 lit-element 在 Web 组件中获取异步数据:

import {LitElement, html} from 'lit-element';

class WebIndex extends LitElement {

    connectedCallback() {
        super.connectedCallback();
        this.fetchData();

    }

    fetchData() {
        fetch('ajax_url')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                };
                response.json();
            })
            .then(data => {
                this.data = data;
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

    render() {
        if (!this.data) {
            return html`
                <h4>Loading...</h4>
            `;
        }
        return html`
            <h4>Done</h4>
        `;
    }

}

customElements.define('web-index', WebIndex);

然而，html 呈现的内容永远不会改变。我做错了什么？这是在 Web 组件中获取异步数据的最佳方式吗？

Answer 1

您需要在组件属性中注册data，以便在数据值更改时调用渲染

static get properties() {
   return {
     data: Object
   }
}

https://lit-element.polymer-project.org/guide/properties

在 lit-element Web 组件中获取异步数据

Fetching asynchronous data in a lit-element web component

ajax

fetch

web-component

lit-element