• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

117
Vistas
cómo escribir una función común en un elemento iluminado

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.

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda