Actualmente estoy trabajando en una aplicación de mensajería usando React. Por el momento, estoy luchando por determinar un método para retrasar la función principal que publica un mensaje en el chat.
El problema principal es trabajar con la API de Cloudinary, para el envío de mensajes con imágenes, necesito las URL que se escupen de la solicitud POST. Por lo tanto, también necesito que el método postMessage se retrase hasta que mis fotos se hayan cargado en la base de datos de Cloudinary. y la matriz 'temp' ha recopilado las nuevas URL de imágenes generadas. Mi problema comienza y probablemente termina con el hecho de que no puedo determinar la forma correcta de retrasar postMessage hasta que se complete mi declaración forEach.
Aquí está el código para mi método handleSubmit:
const handleSubmit = async (event) => { event.preventDefault(); const formElements = event.currentTarget.elements; const formData = new FormData(); let temp = []; if (imagesSelected.length > 0) { imagesSelected.forEach((image) => { formData.append('file', image); formData.append('upload_preset', 'sendpics'); instance.post('https://api.cloudinary.com/v1_1/dg7d5il8f/image/upload', formData ) .then((res) => { temp.push(res.data.url); }) .catch((err) => { console.log(err); }); }); const reqBody = { text: formElements.text.value, recipientId: otherUser.id, conversationId, sender: conversationId ? null : user, attachments: temp, }; postMessage(reqBody); } else { const reqBody = { text: formElements.text.value, recipientId: otherUser.id, conversationId, sender: conversationId ? null : user, attachments: [], }; postMessage(reqBody); } setText(''); setImagesSelected(() => []); };El problema permanece en la primera instrucción if, ya que una vez que se activa la instrucción forEach, postMessage se activa inmediatamente después, antes de que temp tenga la oportunidad de completarse con los nuevos valores de URL. Disculpas si toda la pregunta en sí es complicada de alguna manera. Por favor comente si necesito aclarar algo sobre mi pregunta. ¡Gracias por cualquier ayuda/sugerencia!
Creo que deberá esperarlos con un bucle for-of usando-async-await-with-a-foreach-loop
Un ejemplo con tu caso:
for (const image of imagesSelected) { //... try { const resp = await instance.post( "https://api.cloudinary.com/v1_1/dg7d5il8f/image/upload", formData ); temp.push(resp.data.url); } catch (error) { console.log(error); } } Otro enfoque es reemplazar forEach con map y agregar Promise.all como E. Shcherbo mencionó en los comentarios
Desafortunadamente, no puede usar el método estándar Array.forEach(callback) si cada elemento debe ejecutarse de forma asíncrona porque el siguiente código no esperará a que finalice el bucle.
Un método adecuado sería crear una Promise para cada uno de los elementos de la matriz y esperar a que se resuelvan. Si tiene pocos elementos, puede hacerlo a mano, o si son demasiados o simplemente no están codificados, puede crear esa matriz Promise con un bucle.
Tal vez así:
let promiseArray = [] imagesSelected.forEach(item => { let p = new Promise((resolve, reject) => { // do your asynchronous stuff here instance.post(... // when you want the code to be "marked" as finished, run resolve(optionalReturnData) // when an error happens reject(optionalReason) ... }) promiseArray.append(p) }) // wait for the promises Promise.all(imagesSelected).then(returnDataArray => { // now all promises have resolved and you can continue ... postMessage(...) })Para obtener más detalles, consulte la documentación de mdn .