Facebook群组帖子数据合并后JSON.stringify显示空数组异常排查

嘿，这个问题我之前对接FB Graph API的时候也踩过坑！咱们先拆解一下你遇到的两个看似矛盾的现象：

1. JSON.stringify输出{"posts":[]}：这是因为执行序列化的时候，nameAndMessage.posts确实是空数组；
2. 控制台展开后看到25条数据：这是浏览器控制台的「惰性求值」特性——当你点击展开数组时，它才会去读取内存里数组的最新状态，而此时异步请求已经完成，数据已经填充进去了。

核心原因：异步操作的时序问题 #

你对接Facebook的API（不管是用SDK还是fetch/axios）都是异步操作，而你大概率是在这些异步请求还没返回结果的时候，就执行了JSON.stringify。举个典型的错误写法例子：

const nameAndMessage = { posts: [] };

// 假设posts是你从FB拿到的原始帖子数组
posts.forEach(post => {
  // 异步请求发帖用户的信息
  FB.api(`/${post.from.id}`, (response) => {
    nameAndMessage.posts.push({
      message: post.message,
      userName: response.name,
      userId: response.id
    });
  });
});

// 这里异步请求还没跑完！posts数组还是空的
console.log(JSON.stringify(nameAndMessage)); // 输出{"posts":[]}

解决方案：确保所有异步操作完成后再处理数据 #

用Promise.all配合async/await来等待所有用户信息请求完成，再进行序列化操作，修正后的代码大概是这样：

async function getPostsWithUserInfo() {
  const nameAndMessage = { posts: [] };
  
  // 1. 先异步获取群组帖子（假设你的方法是这个）
  const rawPosts = await fetchGroupPosts(); 
  
  // 2. 把每个获取用户信息的请求包装成Promise
  const userInfoPromises = rawPosts.map(async (post) => {
    // 用FB SDK或者fetch请求用户信息，这里以FB SDK为例
    const userInfo = await new Promise((resolve) => {
      FB.api(`/${post.from.id}`, (res) => resolve(res));
    });
    
    // 返回合并后的单条数据
    return {
      message: post.message,
      userName: userInfo.name,
      userId: userInfo.id
    };
  });
  
  // 3. 等待所有Promise完成，填充到posts数组
  nameAndMessage.posts = await Promise.all(userInfoPromises);
  
  // 4. 现在再序列化就有数据了！
  const jsonStr = JSON.stringify(nameAndMessage);
  console.log(jsonStr); // 会输出包含25条数据的JSON
  
  return nameAndMessage;
}

// 调用这个异步函数
getPostsWithUserInfo();

补充说明控制台的「Array(0)」现象 #

当你在控制台打印nameAndMessage时，浏览器会先显示数组的初始状态（长度0），但因为数组是引用类型，当你点击展开时，浏览器会重新读取它的当前值——这时候异步请求已经完成，数据已经填充，所以你能看到25条记录。这不是bug，只是控制台的展示特性而已。

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