fetch или Promise.all не дожидается всех результатов
Пытаюсь вывести все имена по урлам, но на 64 имени оно перестаёт помещать имена в массив и возвращает их, а уже после вывода массива подгружает остальныне имена. (закоментированный console.log) Если очистить массив, на месте имён ничего нет, но если этого не делать (закоментировал) - видно урлы персонажей, вместо имён.
Весь код из useEffect:
useEffect(() => {
const loadPlanets = async () => {
try {
let all_planets = [];
for (let i = 1; i <= 6; i++) {
const req = await fetch("https://swapi.dev/api/planets/?page="+i);
if (req.ok) {
const res = await req.json();
res.results.forEach(async (r, ind) => {
const residents = r.residents;
const films = r.films;
/*res.results[ind].residents = [];
res.results[ind].films = [];*/
res.results[ind].residents = await loadNameOrTitle(residents);
res.results[ind].films = await loadNameOrTitle(films);
delete res.results.created;
delete res.results.edited;
delete res.results.url;
});
all_planets = all_planets.concat(res.results);
} else {
console.log(req.statusText);
}
}
set_objects(all_planets);
} catch (err) {
console.log(err);
}
}
const loadNameOrTitle = async (urls) => {
return await Promise.all(urls.map(async (url) => {
try {
const req = await fetch(url);
if (req.ok) {
const res = await req.json();
//console.log(res.name || res.title);
return res.name || res.title;
} else {
console.log(req.statusText);
}
} catch (err) {
console.log(err);
}
}));
}
loadPlanets();
}, []);