Fetch请求推送元素至全局数组后数组为空问题求助

Hey，这个问题我见得太多了——核心原因就是异步操作的时序问题，咱们一步步来拆解：

问题根源：fetch是异步的，你打印得太早了！ #

JavaScript里像fetch这种异步API，不会阻塞后续代码的执行。当你在fetch外面直接打印charities时，fetch的请求还在后台跑，它的then回调根本没机会执行，所以数组自然是空的。

举个例子，你的代码大概率是这种结构：

let charities = [];

fetch('../mapdata/markers.txt')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response error.');
  })
  .then(data => {
    // 遍历数据并push到数组
    data.forEach(item => charities.push(item));
  })
  .catch(error => console.error(error));

// 这里的代码会先执行！此时charities还是空数组
console.log(charities);

同步代码（比如最后的console.log）会优先执行，异步的fetch回调要等所有同步代码跑完，才会进入事件队列执行——这就是你打印空数组的原因。

解决方案：在异步回调内部处理数据，或者用async/await #

方案1：在then回调里使用数组（最直接）

既然数据只有在fetch完成后才会有，那所有依赖这个数组的操作都要放在then回调里：

let charities = [];

fetch('../mapdata/markers.txt')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response error.');
  })
  .then(data => {
    data.forEach(item => charities.push(item));
    // 现在打印就有数据了！
    console.log(charities);
    // 比如调用渲染函数、绑定事件之类的操作也放在这里
    renderCharityMarkers(charities);
  })
  .catch(error => console.error(error));

方案2：用async/await让代码更像同步逻辑

如果你觉得链式then看着麻烦，可以用async/await语法，让异步代码的可读性更高：

let charities = [];

async function loadCharityData() {
  try {
    const response = await fetch('../mapdata/markers.txt');
    if (!response.ok) {
      throw new Error('Network response error.');
    }
    const data = await response.json();
    data.forEach(item => charities.push(item));
    
    // 在这里处理数组
    console.log(charities);
  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

// 调用异步函数
loadCharityData();

// 注意：如果要在函数外使用，得等它执行完
loadCharityData().then(() => {
  console.log('外部打印:', charities);
});

额外排查点 #

除了时序问题，还有几个地方可能导致数组为空：

• 检查请求是否成功：打开浏览器控制台的「Network」标签，看markers.txt的请求状态码是不是200，响应内容是不是合法的JSON格式。如果JSON格式错了，response.json()会抛出错误，进入catch回调，数组就不会被填充。
• 确认数据结构：如果返回的data不是数组（比如是个对象），forEach会报错，这时候要改成Object.values(data).forEach(...)或者其他遍历方式。
• 检查文件路径：确保../mapdata/markers.txt是正确的相对路径，有没有出现404错误。

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