Estoy trabajando en una aplicación de reacción usando redux. Tengo una acción que verifica si tenemos o no nuevos datos de imagen. Si es así, lo cargará, recibirá la nueva URL y luego usará estos datos para actualizar el objeto.
Sin embargo, el orden de las operaciones dentro de mi función funciona como se esperaba, sin embargo, el código fuera de la función se ejecuta antes de que se complete.
¿Por qué mi registro de consola en la parte inferior se ejecuta antes de que se complete el contenido de mi función asíncrona?
if(imageData) { const imageGUID = guid(); const storageRef = projectStorage.ref(`${imageData.name}_${imageGUID}`); // This function should complete before the console log at the bottom is called. await storageRef.put(imageData).on('state_changed', snap => { }, async (err) => { console.log(err) toastr.error("Uh Oh!", `Could not upload image`); }, async () => { imageURL = await storageRef.getDownloadURL(); console.log("NEW IMAGE URL: ", imageURL); }) } console.log("Done setting up new image: ", imageURL) // This is called before we get the IMAGE URL from Firestore.... why?La función .on no devuelve una Promesa, por lo que no hay nada que esperar para await . Tienes que convertir la API base de eventos de put a Promise.
if (imageData) { const imageGUID = guid(); const storageRef = projectStorage.ref(`${imageData.name}_${imageGUID}`); // This function should complete before the console log at the bottom is called. try { await new Promise((resolve, reject) => { storageRef.put(imageData) .on('state_changed', snap => {}, reject, resolve) }) imageURL = await storageRef.getDownloadURL(); console.log("NEW IMAGE URL: ", imageURL); } catch (err) { console.log(err) toastr.error("Uh Oh!", `Could not upload image`); } } console.log("Done setting up new image: ", imageURL)storageRef.put(imageData).on : no parece una promesa (usted carga su imagen en la devolución de llamada), por lo que await no tiene sentido
Si quieres usar promesas, deberías escribir algo así
await new Promise((resolve, reject) => { storageRef .put(imageData) .on('state_changed', snap => { }, async (err) => { console.log(err); toastr.error('Uh Oh!', `Could not upload image`); reject() }, async () => { imageURL = await storageRef.getDownloadURL(); console.log('NEW IMAGE URL: ', imageURL); resolve() }); })