es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo uso correctamente await dentro de declaraciones de Javascript si-else de forma abreviada?

No solo estoy haciendo una transición lejos de jQuery, sino que también estoy tratando de hacer mi código mucho más liviano. Como trabajo en aplicaciones empresariales a gran escala, la cantidad de jQuery y JavaScript que se utiliza puede alcanzar un punto crítico.

Quiero comenzar a trabajar de una manera mejor y volver a usar JavaScript básico. Construyo aplicaciones usando herramientas como KendoUI y depende de jQuery para que funcione. Dicho esto, quiero mantener el resto de mi código como JavaScript básico, abreviado y eficiente (asíncrono cuando corresponda).

Estoy tratando de lograr los siguientes objetivos con una declaración de JavaScript:

Encontrar el contenedor de pestañas
Vincular un escucha de eventos para comprobar el Id de la pestaña cuando se muestra su evento
Cargar una cuadrícula KendoUI de forma asíncrona, esperando su carga

Para lograr esto en JavaScript básico abreviado, hice lo siguiente.

// Encontrar las pestañas usando el selector de consultas
document.querySelector(‘#main-tabs’)

// Agregar un escucha de eventos que escuche el evento de pestaña de arranque `mostrado`
.addEventListener('shown.bs.tab', (e) => {

    // Tomar la id de la pestaña y si el nombre es `overview-tab`

     // Entonces cargar la cuadrícula, si no haga nada.
        (e.target.id == “overview-tab”) ? load_grid_opportunities(): null;

});

Bueno, desde aquí creé mi función asíncrona que carga mi cuadrícula. Creé una función asíncrona llamada load_grid_opportunities y luego encontramos la vinculación de widgets genéricos basada en jQuery de KendoUI.

const load_grid_opportunities = async () => {
    $(‘#grid_opportunities’).kendoGrid({
       // Acortado por brevedad
    });
}

Aquí es donde he llegado porque ahora me pregunto, ¿cómo espero esta función asíncrona en mi declaración if/else? Mi primer instinto fue simplemente llamar esperar inline de esta manera:

(e.target.id == “overview-tab”) ? await load_grid_opportunities(): null;

Sin embargo, esto no funcionó ya que es un argumento inesperado. Luego traté de usar paréntesis para encapsular la solicitud, pero tampoco funcionó.

(e.target.id == “overview-tab”) ? (esperar load_grid_opportunities()): null;

Entonces, ¿cómo demonios puedo esperar mi función?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Puedes esperar a que se complete tu función usando la palabra clave await antes de la llamada de la función. Por ejemplo:

    (e.target.id == "overview-tab") ? await load_grid_opportunities() : null;
    

Comments are closed.