agarsev
commented
4 years ago El problema es aquí? (si pincháis en la línea en el código en github os permite sacar un enlace).
En javascript moderno se tiende a utilizar un estilo de programación más funcional, en lugar de bucles for usamos la función map. Así, cada palabra la "mapeamos" a un fetch, y tenemos un array de fetchs. Pero como cada promesa (el resultado de fetch) puede resolverse en un orden distinto, tenemos la función Promise.all que manda varias promesas (fetches) a la vez, espera a todas, y devuelve los resultados en el orden que se le han pedido.
En caso de querer hacerlo estilo "síncrono", con await, esto sólo se puede hacer dentro de funciones de tipo async, así que tendríais que convertir vuestra función en async.
Es decir, hay las siguientes opciones:
Promise.all(array_de_palabras.map(palabra => fetch(`/url/blablabla/${palabra}`)))
.then(array_de_imagenes_en_orden => {
// hacer lo que sea
});ó
async function getImagenesparaFrase (palabras) {
let imagenes = [];
for (palabra of palabras) {
imagenes.push(await fetch(`/url/blablabla/${palabra}`));
}
return ret;
}
getImagenesparaFrase(palabras).then(imagenes => {
// hacer lo que sea
})He escrito ese código aquí directamente sin probarlo, pero es javacript real, y así aprovecho también y os enseño algunas cosas de javascript moderno (estilo funcional, promesas, let, arrow functions, template strings) que os recomiendo que uséis en el futuro o que incluso podéis empezar a usar ya. El javascript moderno es mucho más elegante y cómodo de escribir, y hace innecesario jQuery con lo que las aplicaciones son más ligeras y van mucho más rápido.
svegascanas
Hola Antonio,
Tenemos un pequeño problema con el fetch de las imágenes. Primero, hacemos una llamada fetch al texto, y posteriormente mediante un bucle hacemos las llamadas fetch para hacer GET de las imágenes. El texto está perfecto, pero el problema es que tras hacer las llamadas GET las imágenes llegan desordenadas, y no encontramos la manera de que lleguen en orden.
El código está subido a la rama Web-Fetch-Imagenes, en el fichero scrips.js, función GetImageSentence, que a su vez llama a getImages.
Hemos probado utilizando la instruccion await, pero no da resultado. Porfi, ¿podrías echarnos un cable?
Muchas gracias!