如何用Promise实现WordPress指定分类全量文章数组回调函数？

我明白你现在遇到的问题啦——用WordPress REST API分页拉取指定分类的文章时，循环能在控制台打印内容，但用Promise处理时没法把数据正确塞进数组里，尤其搞不清push()该传什么参数，对吧？我来帮你捋清楚怎么解决这个问题。

核心问题拆解 #

你遇到的主要问题有两个：

1. 异步请求的顺序问题：Promise是异步执行的，如果直接在循环里处理，可能会出现数据还没返回就继续下一轮循环的情况，导致数组收集不完整。
2. push()的参数错误：你可能直接把API返回的整个文章数组塞进了allPosts，导致最终数组变成了「数组套数组」的结构，而不是一维的文章列表。

解决方案代码示例 #

下面给你两种靠谱的实现方式，分别用async/await（更直观）和纯Promise链（适合不支持async/await的环境）来处理分页请求。

方式一：用async/await串行获取（稳妥不易限流）

这种方式会等待每一页请求完成后再拉取下一页，适合文章数量较多的情况，避免触发WordPress API的限流机制。

// 封装单页文章请求函数
async function fetchSinglePagePosts(categorySlug, page = 1) {
  // 替换成你的WordPress站点API地址，categorySlug可以换成分类ID
  const apiUrl = `https://your-wordpress-site.com/wp-json/wp/v2/posts?categories=${categorySlug}&per_page=100&page=${page}`;
  
  const response = await fetch(apiUrl);
  
  // 检查请求是否成功
  if (!response.ok) {
    throw new Error(`第${page}页请求失败：${response.status}`);
  }
  
  // 从响应头获取总页数（WordPress API自带的字段）
  const totalPages = parseInt(response.headers.get('X-WP-TotalPages'), 10);
  // 解析当前页的文章数据
  const currentPagePosts = await response.json();
  
  return { currentPagePosts, totalPages };
}

// 主函数：循环获取所有页的文章
async function fetchAllCategoryPosts(categorySlug) {
  let allPosts = [];
  let currentPage = 1;
  let totalPages = 1;

  do {
    const { currentPagePosts, totalPages: fetchedTotalPages } = await fetchSinglePagePosts(categorySlug, currentPage);
    
    // 重点：用扩展运算符把当前页的文章元素逐个push进数组，而不是push整个数组
    allPosts.push(...currentPagePosts);
    // 也可以用 concat：allPosts = allPosts.concat(currentPagePosts); 效果一致
    
    totalPages = fetchedTotalPages;
    currentPage++;
    console.log(`已获取第${currentPage-1}页，共${totalPages}页`);
  } while (currentPage <= totalPages);

  return allPosts;
}

// 使用示例
fetchAllCategoryPosts('your-category-slug')
  .then(allPosts => {
    console.log('所有文章数据：', allPosts);
    // 这里就可以把allPosts传给静态站点编译器了
  })
  .catch(error => {
    console.error('获取文章失败：', error);
  });

方式二：用Promise.all并行获取（速度更快）

如果你的分类文章页数不多（比如10页以内），可以用并行请求的方式，一次性发起所有分页请求，效率更高。

// 封装单页请求函数（纯Promise版本）
function fetchSinglePagePosts(categorySlug, page = 1) {
  const apiUrl = `https://your-wordpress-site.com/wp-json/wp/v2/posts?categories=${categorySlug}&per_page=100&page=${page}`;
  
  return fetch(apiUrl)
    .then(response => {
      if (!response.ok) throw new Error(`第${page}页请求失败：${response.status}`);
      const totalPages = parseInt(response.headers.get('X-WP-TotalPages'), 10);
      return response.json().then(posts => ({ posts, totalPages }));
    });
}

// 主函数：并行获取所有页
function fetchAllCategoryPosts(categorySlug) {
  return fetchSinglePagePosts(categorySlug, 1)
    .then(({ posts: firstPagePosts, totalPages }) => {
      // 生成所有后续页面的请求Promise
      const pageRequests = [];
      for (let page = 2; page <= totalPages; page++) {
        pageRequests.push(
          fetchSinglePagePosts(categorySlug, page).then(res => res.posts)
        );
      }
      // 并行执行所有请求，然后合并结果
      return Promise.all([firstPagePosts, ...pageRequests])
        .then(allPageData => allPageData.flat()); // 把二维数组扁平化
    });
}

// 使用示例
fetchAllCategoryPosts('your-category-slug')
  .then(allPosts => console.log('所有文章：', allPosts))
  .catch(err => console.error('出错了：', err));

关键注意点 #

1. push()的正确用法：一定要用push(...currentPagePosts)或者concat，不能直接push(currentPagePosts)——后者会把整个当前页的数组作为一个元素塞进allPosts，导致最终数组是[[post1, post2], [post3, post4]]这样的二维结构，而我们需要的是一维的文章列表。
2. 利用响应头获取总页数：WordPress API的响应头里的X-WP-TotalPages字段会返回总页数，不用自己硬编码循环次数，动态判断停止时机更可靠。
3. 错误处理：一定要加上请求失败的捕获逻辑，避免某个分页请求出错导致整个流程卡死。

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