funciones async/await en LWC

Siéntete en la libertad de divulgar nuestro sitio y códigos en tus redes, ayúdanos a aumentar nuestra comunidad.

Solución:

async/await La sintaxis es totalmente compatible con LWC. Sin embargo, como se introdujo en ES8, en los navegadores antiguos, esta sintaxis se transfiere a ES5, lo que puede causar problemas de rendimiento si el código se ejecuta muchas veces.

la await la palabra clave solo es válida dentro async funciones

En su caso, para hacer que su código se pueda implementar con el uso de async/await syntax puede utilizar 3 enfoques:

1. declarar algunos async init() función e invocarla dentro connectedCallback() gancho:

connectedCallback() 
    this.init();



async init() 
    try 
        this.accounts = await getAll();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
     catch (error) 
        this.error = error;
     finally 
        this.isLoaded = true;
    

2. Invocarlo de forma anónima como un IIFE:

connectedCallback() 
    (async () => 
        try 
            this.accounts = await getAll();
            const value = await this.promiseFunc();
            console.log('2nd then executes after 3 seconds async, value:' + value);
         catch (error) 
            this.error = error;
         finally 
            this.isLoaded = true;
        
    )();

3. Haz tu connectedCallback() gancho de ciclo de vida async:

async connectedCallback() 
    try 
        this.accounts = await getAll();
        await this.errorPromise();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
     catch (error) 
        this.error = error;
     finally 
        this.isLoaded = true;
    

No le recomendaría usar la tercera opción al menos para la coherencia de la API. No estoy seguro acerca de los efectos a largo plazo.

En cuanto a la captura de errores de funciones asíncronas, puede usar try/catch bloquearlos o manejarlos por separado, utilizando catch() método porque la función asíncrona implícitamente devuelve una promesa:

this.accounts = await getAll().catch(error => this.error = error);
const value = await this.promiseFunc().catch((/*rejected obj*/) => /*error handling*/);

Aquí tienes las comentarios y calificaciones

Si estás contento con lo expuesto, tienes la libertad de dejar una noticia acerca de qué te ha impresionado de esta reseña.

---

---

Utiliza Nuestro Buscador