No solo estoy haciendo una transición lejos de jQuery, sino que también estoy tratando de hacer que mi código sea mucho más ágil. Mientras trabajo en aplicaciones empresariales a gran escala, la cantidad de jQuery y JavaScript que se utiliza puede llegar a un punto crítico.
Quiero comenzar a trabajar de una mejor manera y usar JavaScript de vainilla nuevamente. Creo aplicaciones usando 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 (asincrónico cuando corresponda).
Estoy tratando de lograr los siguientes objetivos con una declaración de JavaScript mía
shown su eventoEntonces, para lograr esto en JavaScript de vainilla abreviado, hice lo siguiente.
//Find the tabs using the query selector document.querySelector('#main-tabs') //Add an event listener that listens for the `shown` bootstrap tab event .addEventListener('shown.bs.tab', (e) => { //Take the id of the tab and if the name equals "overview-tab" //then load the grid, if it doesn't then do nothing. (e.target.id == "overview-tab") ? load_grid_opportunities() : null; }); Ok, desde aquí fui y creé mi función asíncrona que carga mi cuadrícula. Creé una función asíncrona llamada load_grid_opportunities y luego encontramos un enlace de widget genérico basado en KendoUI jQuery.
const load_grid_opportunities = async () => { $('#grid_opportunities').kendoGrid({ //shortened for brevity }); } Aquí es donde llegué porque ahora me pregunto, ¿cómo espero esta función asíncrona en mi declaración if/else? Mi primer instinto fue simplemente llamar await en línea 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") ? (await load_grid_opportunities()) : null;Entonces, ¿cómo diablos puedo esperar mi función?
Para esperar su función, su función debe devolver la promesa, consulte el código a continuación.
function load_grid_opportunities() { return new Promise((resolve, reject) => { $('#grid_opportunities').kendoGrid({ //shortened for brevity }); resolve(); }); } // Now you can call your function async function doSomething() { if (e.target.id == "overview-tab") { await load_grid_opportunities(); } }