使用WordPress API与Fetch时，嵌套Promise.all无法提前完成数据请求

嘿，我来帮你捋捋这个Promise逻辑的问题！核心矛盾很明确：你希望页面展示数据之前就完成所有API请求，但现在请求总是在页面加载后才结束，说明你的Promise链没有和页面渲染流程正确挂钩。结合你提到的嵌套Promise.all，我猜大概率是这几个地方出了问题：

1. 没有让页面渲染等待Promise完成 #

如果你的页面渲染逻辑没有等待getProjects()返回的Promise执行完毕，浏览器自然会先走完页面渲染流程，再等请求结束。比如你可能只是直接调用了getProjects()，但没加await，也没在.then()回调里触发渲染。

举个典型的错误写法：

function getProjects() {
  return Promise.all([
    fetch('/wp-json/wp/v2/posts'),
    fetch('/wp-json/wp/v2/pages')
  ]).then(responses => Promise.all(responses.map(res => res.json())))
    .then(data => {
      window.globalData = data; // 赋值全局变量
    });
}

// 直接调用，但没等请求完成就渲染页面
getProjects();
renderPage(); // 这里会先执行，globalData还没值！

正确的做法是让渲染逻辑等待Promise链完成：

// 用async/await写法更直观
async function initApp() {
  await getProjects(); // 等所有请求都搞定
  renderPage(); // 现在globalData已经有数据了
}

// 页面DOM加载完成后启动初始化流程
document.addEventListener('DOMContentLoaded', initApp);

2. 嵌套Promise.all的写法错误，没返回完整Promise链 #

如果你的getProjects()里用了嵌套的Promise.all，很可能是内层Promise没有被正确链式返回，导致getProjects()没有返回一个能被外部等待的Promise。

错误的嵌套示例：

function getProjects() {
  Promise.all([fetchPosts(), fetchPages()])
    .then(results => {
      // 内层Promise.all没返回，链断了！
      Promise.all([fetchRelated(results[0]), fetchMeta(results[1])])
        .then(innerResults => {
          window.globalData = innerResults;
        });
    });
  // 这里没有返回任何Promise，外部无法等待！
}

正确的嵌套写法要确保整个Promise链被返回：

function getProjects() {
  return Promise.all([fetchPosts(), fetchPages()]) // 必须return最外层Promise
    .then(results => {
      // 内层Promise也要return，让链延续下去
      return Promise.all([fetchRelated(results[0]), fetchMeta(results[1])]);
    })
    .then(innerResults => {
      window.globalData = innerResults;
      return innerResults; // 可选，方便后续用await直接获取值
    });
}

或者用async/await重构，可读性拉满：

async function getProjects() {
  // 先并行获取基础资源
  const [postsRes, pagesRes] = await Promise.all([
    fetch('/wp-json/wp/v2/posts'),
    fetch('/wp-json/wp/v2/pages')
  ]);
  const [posts, pages] = await Promise.all([
    postsRes.json(),
    pagesRes.json()
  ]);
  
  // 如果有依赖前序数据的请求，继续用await
  const relatedPosts = await fetch(`/wp-json/wp/v2/posts?category=${posts[0].categories[0]}`).then(res => res.json());
  
  window.globalData = { posts, pages, relatedPosts };
  return window.globalData;
}

3. 全局变量的读取时机不对 #

就算Promise链没问题，如果你的页面渲染逻辑是在DOM加载早期就直接读取全局变量（比如模板里直接引用、或者DOMContentLoaded回调里没等Promise就读取），也会拿到空值。一定要确保渲染逻辑是在Promise完成后才执行。

快速自查小步骤 #

• 检查getProjects()是否返回了完整的Promise链（每个.then()都要返回内容，或者用async/await自动返回）
• 检查调用getProjects()的地方是否用了await或者.then()来等待它完成，再启动渲染
• 在getProjects()的最后一个.then()里打日志，同时在渲染逻辑里也打日志，看看两者的执行顺序是否符合预期

如果还是找不到问题，可以把你的完整getProjects()代码贴出来，我帮你精准定位！

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