Me cuesta entender las promesas y en este caso con Axios. He estado leyendo sobre esto y busqué stackoverflow sin cesar, pero todavía no puedo entenderlo.
En primer lugar, estoy tratando de obtener una lista de ejercicios, y en ese resultado hay una ID (llamada base_ejercicio). Esa ID que quiero usar para hacer otra solicitud GET para recibir las imágenes para ese ejercicio.
Luego, envío el nombre, la identificación y la imagen como un objeto a una matriz. Funciona perfectamente para obtener la lista de ejercicios y enviarla a una matriz, pero cuando trato de obtener las imágenes, parece que no puedo hacerlo funcionar.
En mi objeto, quiero pasar la imageUrl que recibo de mi promesa getImages. ¿Cómo puedo conseguir esto?
function getImages(exercise_base) { return axios.get("https://wger.de/api/v2/exerciseimage/?exercise_base=" + exercise_base); } const fetchData = async () => { const result = await axios(getFetchUrl()); const array = []; // mapping through all the exercises, getting the exercise_base id which i then pass my getImages function result.data.results.map(({ name, id, category, description, exercise_base }, e, index) => { getImages(exercise_base).then((e) => { // I want to pass this as imageUrl: in my object console.log(e.data.results[0].image); }); array.push({ value: name, description: "description", category: category, key: id, imageUrl: "" // Here I want to pass my imageUrl that I get from my getImages promise. }); }); };Cree una sola promesa que se resuelva cuando todas las promesas internas se resuelvan usando Promise.all() . La resolución de cada promesa interior puede ser el objeto completamente hidratado.
const EXERCISE_IMAGE_URL = "https://wger.de/api/v2/exerciseimage/" const getMainImage = async (exercise_base) => { const { data: { results } } = await axios.get(EXERCISE_IMAGE_URL, { params: { exercise_base } // using params is safer }) // resolve with the first _main_ image (or undefined if none) return results.find(({ is_main }) => is_main)?.image } const fetchData = async () => { const { data: { results } } = await axios(getFetchUrl()); // map each result to a new promise that resolves with the full object return Promise.all(results.map(async ({ name, id, category, description, exercise_base }) => ({ value: name, description, category, key: id, imageUrl: await getMainImage(exercise_base) }))) }