1

我有一些使用发光元素创建的 Web 组件。其中包括一些从另一个站点发送和获取数据的 api 请求，我希望通过 api 请求标头发送一些数据。因此，我希望创建一个通用函数来包含这些标题详细信息，以防我将来需要更改它们，我不需要一一编辑这些组件。我需要如下解决方案：

common_function.js

function api_request(url) {
 // content
}

my_component.js

import '/common_function.js';
...

constructor(){
 api_request('http://apiRequestUrl');
}

请让我知道一种使用 lit 元素实现此目的的方法。提前致谢。

4

1 回答 1

0

好的..我找到了解决方案。但我不知道这是否是完美的答案。我们可以使用 lit Reactive Controllers 来完成这项工作。这是示例我是如何做到的。

common_function.js

import {initialState, Task} from '@lit-labs/task';
import * as SETTINGS from "../../bmw_settings";


export class ApiRequestController {
    host;
    url;
    id;
    task;
    data = '';

    _bmw_send_api_request() {
        this.task = new Task(
            this.host,
            async ([data]) => {
                const response = await fetch(
                    `${SETTINGS.BASE_URL + this.url}`,
                    {
                        headers: {
                            "Content-Type": "application/json",
                            'Access-Control-Request-Headers': 'Api-key, Content-Type',
                            'Api-key': '123'
                        }
                    }
                );
                const result = await response.json();
                const error = result.error;
                if (error !== undefined) {
                    throw new Error(error);
                }
                return result;
            },
            () => [this.data]
        );
    }

    constructor(host, url, id) {
        this.host = host;
        this.url = url;
        this.id = id;

        this._bmw_send_api_request();

    }

    set data(value) {
        this.data = value;
        this.host.requestUpdate();
    }
    get data() {
        return this.data;
    }

    render(renderFunctions) {
        return this.task.render(renderFunctions);
    }
}

my_component.js

import { LitElement, html} from 'lit';

import {ApiRequestController} from  '../../common_functions';

class search_bar extends LitElement {

    static properties = {
        provider_type : String,
        reasons : Array,

    }

    constructor() {
        super();
        this._getAllReasons();
    }

     async _getAllReasons(){
        this.reasons = await new ApiRequestController(this, '/api/v1/get-reasons', 'search_bar');
    }

    render() {
        return html `
        ${this.reasons.render({
            complete: (data) => html `
                <p>Reasons List</p>
                <select>
                <option>Select Reason</option>
                ${data.data.map((val) => 
                    html `<option value="${val.id}">${val.reason}</option>`
                )}
                </select>
            `,
           
        })}
     `;
    }
}

customElements.define('search-bar', search_bar)

如果您需要更多详细信息，请使用此文档。谢谢

于 2022-01-29T14:00:49.960 回答