使用Fetch API仅返回最后一个ID值，无法获取全部数据的问题求助

核心问题 #

1. 全局变量覆盖：你没有给locationID添加let/const声明，导致它成为全局变量，在forEach循环中每次迭代都会用新ID覆盖旧值，最终仅保留最后一个ID。
2. 单次请求而非批量执行：第二个fetch写在forEach循环外部，只会执行一次，自然只能获取最后一个ID对应的影片数据。

修复后的代码示例 #

const locationURL = 'https://ghibliapi.vercel.app/locations';
const filmURL = 'https://ghibliapi.vercel.app/films';

fetch(locationURL)
  .then(response => response.json())
  .then(locationData => {
    // 收集所有唯一的影片ID，避免重复请求同一部影片
    const uniqueFilmIds = [...new Set(locationData.map(locationDetails => {
      return locationDetails.films[0].split('/')[4];
    }))];

    // 批量发起影片请求，用Promise.all等待所有请求完成
    return Promise.all(uniqueFilmIds.map(filmId => {
      return fetch(`${filmURL}/${filmId}`).then(res => res.json());
    }));
  })
  .then(allFilmDetails => {
    // 处理所有返回的影片数据
    allFilmDetails.forEach(film => {
      console.log(film.id, film.title);
    });
  })
  .catch(err => {
    // 捕获并处理请求过程中的错误
    console.error('请求出错:', err);
  });

关键说明 #

• 用map收集ID：map方法会直接返回所有ID组成的数组，比forEach更适合做数据收集操作。
• 去重处理：借助Set对ID数组去重，避免对同一部影片重复发起请求，减少不必要的资源消耗。
• Promise.all处理异步批量请求：它会等待所有fetch请求完成后，一次性返回所有影片数据的数组，确保你能拿到全部结果。
• 变量声明规范：所有变量都用const/let声明，避免全局变量污染引发的意外问题。

如果你之前直接把fetch放进forEach里没反应，大概率是没处理异步逻辑，或是遗漏了错误捕获——请求失败时没有日志提示，导致你误以为没有响应。

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