javascript - programacion - mostrar loading mientras carga pagina jquery

Asíncrono/espera dentro de la matriz#mapa()

Question

Estoy obteniendo un error de tiempo de compilación con este código:

const someFunction = async (myArray) => {
    return myArray.map(myValue => {
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue);
        }
    });
};

El mensaje de error es:

esperar es una palabra reservada

¿Por qué no puedo usarlo así?

También probé de otra manera, pero me da el mismo error:

 const someFunction = async (myArray) => {
    return myArray.map(myValue => {
        const myNewValue = await service.getByValue(myValue);
        return {
            id: "my_id",
            myValue: myNewValue 
        }
    });
};

Answer 1

Creo que eso se debe a que la función en el map no es asíncrona , por lo que no puede esperar en su declaración de devolución. Se compila con esta modificación:

const someFunction = async (myArray) => {
    return myArray.map(async (myValue) => { // <-- note the `async` on this line
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue)
        }
    });
};

Pruébalo en Babel REPL

Entonces ... no es posible dar recomendaciones sin ver el resto de su aplicación, pero dependiendo de lo que intenta hacer, haga que la función interna sea asíncrona o intente crear una arquitectura diferente para este bloque.

Actualización: podríamos obtener un nivel superior a la espera de un día: https://github.com/MylesBorins/proposal-top-level-await

Answer 2

No puedes hacer esto como te imaginas, porque no puedes usar await si no está directamente dentro de una función async .

Lo más sensato sería hacer que la función se pase al map forma asíncrona. Esto significa que el map devolvería una serie de promesas. Luego podemos usar Promise.all para obtener el resultado cuando todas las promesas regresen. Como Promise.all devuelve una promesa, la función externa no necesita ser async .

const someFunction = (myArray) => {
    const promises = myArray.map(async (myValue) => {
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue)
        }
    });
    return Promise.all(promises);
}