如何将多个Promise请求结果合并为数组并实现全局排序？

核心思路 #

通过Promise.all()批量管理所有站点的请求Promise，确保所有请求完成后再统一处理结果，最终整理为多维数组（每个子数组对应一个站点的页面数据），支持后续排序、筛选等操作。

关键问题修正（针对常见错误代码） #

常见错误包括：未收集Promise实例导致无法等待全部请求完成、未捕获单个请求异常导致批量请求崩溃、未正确解析SPHttpClient响应、结果结构不符合聚合需求。以下是修正后的完整实现：

完整代码实现 #

1. 封装单个站点请求函数

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

// 单个站点的页面数据请求逻辑
const fetchSitePages = async (spHttpClient: SPHttpClient, siteUrl: string): Promise<any[]> => {
  const apiEndpoint = `${siteUrl}/_api/web/lists/getbytitle('Site Pages')/items?$select=Title,Id,Modified,Author/Title&$expand=Author`;

  try {
    const response: SPHttpClientResponse = await spHttpClient.get(
      apiEndpoint,
      SPHttpClient.configurations.v1
    );

    if (!response.ok) {
      throw new Error(`站点 ${siteUrl} 请求失败: ${response.statusText}`);
    }

    const responseData = await response.json();
    // 给每条数据附加站点URL，方便后续溯源
    return responseData.value.map(item => ({
      siteUrl,
      pageTitle: item.Title,
      pageId: item.Id,
      modifiedTime: item.Modified,
      authorName: item.Author.Title
    }));
  } catch (error) {
    console.error(`站点 ${siteUrl} 处理出错:`, error);
    // 请求失败时返回空数组，避免影响Promise.all整体执行
    return [];
  }
};

2. 批量请求与结果聚合

// 批量处理多站点请求，返回多维数组
const fetchAllSitePages = async (spHttpClient: SPHttpClient, siteUrls: string[]): Promise<any[][]> => {
  // 生成所有站点的请求Promise数组
  const requestPromises = siteUrls.map(siteUrl => fetchSitePages(spHttpClient, siteUrl));
  
  // 等待所有请求完成，得到每个站点的结果数组
  const allSiteResults = await Promise.all(requestPromises);
  
  // 过滤掉空数组（对应请求失败的站点）
  return allSiteResults.filter(siteData => siteData.length > 0);
};

3. 使用示例及排序操作

// 待请求的站点URL列表
const targetSiteUrls = [
  'https://contoso.sharepoint.com/sites/Marketing',
  'https://contoso.sharepoint.com/sites/Sales',
  'https://contoso.sharepoint.com/sites/Operations'
];

// 在WebPart或Extension中调用（需已获取spHttpClient实例）
fetchAllSitePages(this.context.spHttpClient, targetSiteUrls)
  .then(multiSiteData => {
    // 场景1：保留多维结构，按站点分组处理
    console.log('按站点分组的页面数据:', multiSiteData);

    // 场景2：扁平化为一维数组，进行全局排序
    const allPages = multiSiteData.flat();
    // 按修改时间倒序排序
    const sortedPages = allPages.sort((a, b) => new Date(b.modifiedTime).getTime() - new Date(a.modifiedTime).getTime());
    
    console.log('全局排序后的页面数据:', sortedPages);
    // 绑定到UI组件展示
  })
  .catch(globalError => {
    console.error('批量请求全局异常:', globalError);
  });

关键注意事项 #

• 异常隔离：单个站点请求失败时返回空数组，避免Promise.all()因个别请求失败而整体挂起
• 数据溯源：给每条页面数据附加站点URL，方便后续区分数据来源
• 灵活结构：多维数组既支持按站点分组操作，也可通过flat()转为一维数组实现全局排序/筛选
• 响应校验：必须检查SPHttpClient响应的ok状态，避免解析错误响应导致异常

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