Así que me doy cuenta de que tengo un problema de alcance aquí. Estoy presionando una API para devolver una lista de películas. La respuesta incluye una serie de objetos de película. Cada objeto de la película tiene una serie de personajes, pero cada personaje es solo un punto final. El objetivo es enumerar cada película con los primeros 3 personajes asociados con esa película en particular. ¿Cuál va a ser la forma más eficiente de lograr esto? Aquí está el código que tengo actualmente, que sé que es incorrecto, pero debería transmitir lo que estoy tratando de hacer con bastante claridad.

 import {getCharByUrl, getFilms} from './api/swapiApi'; getFilms().then(result => { let films = result.results; // Array of films let episodes = ``; films.forEach(film => { let urls = film.characters; // Array of endpoints to hit let chars = `<ul>`; for (let i = 0; i < 3; i++) { getCharByUrl(urls[i]).then(character => { chars += `<li>${character.name}</li>`; }); } chars += `</ul>`; episodes += ` <div class="col-sm-4"> <div>${film.title}</div> <div>${film.director}</div> ${chars} <hr> </div> `; }); global.document.getElementById('films').innerHTML = episodes; });

Código que funcionó para mí:

 import {getCharByUrl, getFilms} from './api/swapiApi'; getFilms().then((result) => { let films = result.results; // Array of films let episodes = ``; var Promise = require('es6-promise').Promise; films.forEach((film) => { let urls = []; // Array of endpoints to hit for(let i = 0; i < 3; i++) { urls.push(film.characters[i]); } let chars = `<ul class="list-unstyled">`; Promise.all(urls.map((url) => { return getCharByUrl(url); })).then((data) => { // data will be an array of the responses from all getCharByUrl requests data.forEach((character) => { chars += `<li>${character.name}</li>`; }); chars += `</ul>`; }).then(() => { episodes += ` <div class="col-sm-4"> <div>${film.title}</div> <div>${film.director}</div> ${chars} <hr> </div> `; global.document.getElementById('films').innerHTML = episodes; }); }); });