Tengo algunos componentes web creados con elementos iluminados. Y eso incluye algunas solicitudes de API para enviar y obtener datos de otro sitio y espero enviar algunos datos a través del encabezado de solicitud de API. Así que espero crear una función común para contener esos detalles del encabezado en caso de que necesite cambiarlos en el futuro, no necesitaré editar esos componentes uno por uno. Necesito una solución como la siguiente:
common_function.js
function api_request(url) { // content }mi_componente.js
import '/common_function.js'; ... constructor(){ api_request('http://apiRequestUrl'); }Por favor, hágame saber una forma de lograr esto usando el elemento iluminado. Gracias por adelantado.
Ok... Encontré una solución. Pero no sé si esta es la respuesta perfecta para esto. Podemos usar controladores reactivos iluminados para hacer el trabajo. Aquí está el ejemplo Cómo lo hice.
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); } }mi_componente.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)use esta documentación si necesita más detalles. Gracias
Cómo crear una función común que pueda importar y reutilizar no tiene nada que ver con lit.
Entonces, cuando tiene una función común en un archivo llamado 'common.js':
export default txt => { console.log('Hello from a common function!', txt); }Puede usarlo en otro archivo javascript, incluidos los componentes iluminados, como este:
import commonfunction from '/path/to/your/common.js'; commonfunction('Wow!');Lo que puede ser un problema (pero que no es su pregunta) es que su navegador no importa iluminado con la importación iluminada que puede haber especificado ... porque puede ser un paquete npm en su servidor. Incluso cuando sirve la carpeta node_modules y especifica la ruta y el nombre de archivo exactos, su importación iluminada puede incluir otras importaciones que se frenan debido a cómo se especifican como resueltas por node.
Por lo tanto, es posible que deba usar algo como RollupJS, que puede distribuir los recursos de su aplicación con las importaciones adecuadas. Consulte https://rollupjs.org/guide/en/
Espero que esto ayude.