如何跨组件共享异步方法 - LitElement

Question

我正在尝试使用 lit-element 构建几个组件，其中我使用了将用于 [=12= 的异步方法] 来自 API 的相同数据。

实用方法：

async resolveData() {
    let response = await fetch('./emp-data.json');
    let empData = await response.json();
    let employees = null;

    employees = empData.employees;

    return employees;
}

问题：我怎样才能真正将这个实用方法从组件中分离出来并重新使用它。在 lit-element 的上下文中是否有解决此问题的最佳方法？

Answer 1

您可以创建单独的服务，以便跨服务于特定服务。方法如下：

步骤 1： 创建服务文件 services.js

export const litServices = (() => {
    const services = {}
    services.apiService1 = async () => {
        const response = await fetch('./emp-data.json').catch(err => {
            return {
                data: {
                    isError: true
                }
            }
        })
        return response.data;
    }
    return services;
})();

第 2 步：将服务导入您的组件并在需要时调用

import {
    html,
    LitElement
} from 'litElements'
import {
    litServices
} from 'services'

class comp extends LitElement {
    static get properties() {
        return {

        }
    }
    constructor() {
        super();
    }
    connectedCallback() {
        super.connectedCallback();
        this.receivedData = this._resolveData();
        this._formatResponse(this.receivedData)
    }
    async _resolveData() {
        const response = await litServices.apiService1();
        return response;
    }
    _formatResponse(receivedData) {
        console.log('First API response is: ', firstApiResponse);
    }
}

这将在需要时调用该服务。此服务可在 How to create services in litElement - sabarinath blog

中重复使用

如何跨组件共享异步方法 - LitElement

How to share async method across the components - LitElement

polymer

lit-element

lit-html