Как разделить асинхронный метод между компонентами - LitElement

Я пытался создать пару компонентов, используя lit-element, где я использовал метод async, который будет использоваться для fetch тех же данных из 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?


person Hitesh Misro    schedule 13.07.2020    source источник


Ответы (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);
    }
}

При необходимости это вызовет службу. Эту службу можно повторно использовать в Как создавать сервисы в litElement - блог sabarinath

person shabarinath    schedule 14.07.2020