如何在组件之间共享异步方法 - LitElement

Question

我试图使用异步方法构建几个组件，lit-element该方法将用于来自fetchAPI 的相同数据。

实用方法：

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

您可以创建单独的服务以便跨域提供特定服务。具体方法如下：

步骤一：创建服务文件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);
    }
}

这将在需要时调用该服务。该服务可以在如何在 litElement 中创建服务中重用 - sabarinath 博客