Как разделить метод asyn c между компонентами - LitElement - PullRequest
Новая
       96

Как разделить метод asyn c между компонентами - LitElement

0 голосов
/ 13 июля 2020

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

1 Ответ

2 голосов
/ 14 июля 2020

Вы можете создать отдельные сервисы, чтобы обслуживать конкретную услугу. Вот как:

шаг 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

...