在Fetch的.then中使用for-each循环提取子元素并移除数组索引

你说的API返回的是带索引的结构化数组，要提取每个元素里的param_1到新数组，Array.map()其实是最直接的方案，之前遇到的Promise问题多半是没处理好异步流程，或者对API返回的结构判断有误。

直接给你修正后的可行代码：

export const getWeatherData = (location) => {
  fetch(url, opts)
    .then(response => {
      document.querySelector(".loading").textContent = "";
      return response.json();
    })
    .then(response => {
      // 这里假设response就是你说的带索引的数组，每个元素包含data.blah.param_1
      const weatherData = response.map(item => item.data.blah.param_1);
      
      console.log(weatherData);
      return weatherData;
    })
    .then(weatherData => displayWeatherData(weatherData))
    .catch(() => displayError());
};

关键细节说明： #

• 为什么map能解决问题？：map()是同步数组方法，只要在response.json()的回调里操作，此时已经拿到了解析完成的数组，完全不会有Promise相关问题。你之前的问题可能是误把异步逻辑塞到了map里，或者数组的实际结构和你预期的不一样。
• 如果不想遍历整个数组：要是只需要部分元素的param_1，可以先做截取或筛选，比如只取前N个元素：

  // 示例：只提取前3个元素的param_1
  const weatherData = response.slice(0, 3).map(item => item.data.blah.param_1);
  

• 如果偏爱forEach写法：也可以用forEach手动收集，逻辑和map一致：

  const weatherData = [];
  response.forEach(item => {
    weatherData.push(item.data.blah.param_1);
  });
  

排查小技巧： #

1. 先确认API返回结构：在拿到response的then回调里加console.log(response)，看看是不是你预期的数组，每个元素的data.blah.param_1路径是否存在，很多时候提取失败都是路径写错了。
2. 异步流程要理清：所有数组操作必须放在response.json()的then回调里执行，因为fetch是异步的，只有这里才能拿到解析好的JSON数据。

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