JQuery异步.each遍历返回空Promise问题求助

这个问题的核心是jQuery的.each()方法不支持异步回调的等待，加上你对Promise数组的处理逻辑有误，导致Promise.all最终拿到的是空数组。

为什么会出现这个问题？ #

1. jQuery的.each()是同步执行的遍历方法，它不会等待你回调里的await contentHandler(id)完成。当代码走到return Promise.all(promises)时，所有的promises.push(...)操作还没执行（因为异步操作还处于pending状态），所以promises还是空数组，自然返回空结果。
2. 你的promises变量类型定义错误：它应该是Promise<IMovies>[]（Promise数组），而不是IMovies[]，因为你要收集的是异步操作的Promise，而不是直接的结果对象。

修复后的代码 #

const getALLMovies = async(page: number = 1): Promise<IMovies[]> =>{
 const res = await axios.get(`${BASE_URL}peliculas/${page}`);
 const body = await res.data;
 const $ = load(body);
 // 把jQuery对象转成数组，用map生成Promise数组
 const promises = Array.from($('body div div div div div div div div div div div div#default-tab-1 div.Posters a')).map(async(element) =>{
 const $element = $(element);
 const id = $element.attr('href').replace(BASE_URL , '').trim();
 const title = $element.find('div.listing-content p').text().trim();
 const poster = $element.find('img').attr('src');
 const extra = await contentHandler(id);
 // 直接返回组装好的对象，map会把这个async函数的返回值（Promise）收集成数组
 return {
 title: title || null,
 poster: poster || null,
 year: extra[0].year || null,
 genres: extra[0].genres || null,
 rating: extra[0].rating || null,
 synopsis: extra[0].synopsis || null,
 authors: extra[0].authors || null,
 director: extra[0].director || null,
 writers: extra[0].writers || null,
 country: extra[0].country || null,
 releaseDate: extra[0].releaseDate || null,
 };
 });
 // 等待所有Promise完成，返回最终的IMovies数组
 return Promise.all(promises);
};

getALLMovies()
 .then(res =>{
 console.log(res); // 现在能拿到完整的数据了
 });

关键修改点说明 #

• 用Array.from() + map()替代jQuery的.each()：数组的map方法可以处理异步回调，每个async回调会返回一个Promise，map会把这些Promise收集成一个数组，供Promise.all使用。
• 直接返回异步结果，而非push到数组：在map的回调里，我们await contentHandler(id)后直接返回组装好的对象，map会自动把这个异步操作包装成Promise并加入数组，避免了原代码中异步push的时序问题。
• 修正Promise数组的类型：现在promises自动推导为Promise<IMovies>[]，符合Promise.all的参数要求，最终返回的Promise<IMovies[]>也能正确解析为电影数据数组。

内容的提问来源于stack exchange，提问作者Chris Michael