React+TS场景下如何等待递归API调用全部完成后处理路径数组

AI 小北

2026-9-25

解决方案

你的问题核心是异步递归调用没有做同步阻塞，所有PNP JS的请求都是异步执行的，未等待全部请求完成就执行后续逻辑。可以通过async/await搭配Promise.all改造递归逻辑实现等待效果，具体改造代码如下：

1. 改造componentDidMount方法

public async componentDidMount(){
  const upperArray: string[] = [];
  // 等待所有递归调用完成
  await this.getFiles("/sites/spfxsite/TestLib", upperArray);
  // 此处即可安全处理已填充完成的upperArray，生成树形视图JSON
  console.log("所有路径已全部获取：", upperArray);
}

2. 改造递归调用的getFiles方法

public async getFiles(folderUrl: string, upperArray: string[]): Promise<void> {
  // 等待当前文件夹的API请求返回结果
  const folderRes = await sp.web.getFolderByServerRelativeUrl(folderUrl)
    .expand("Folders, Files")
    .get();

  // 处理当前文件夹下的文件
  folderRes.Files.forEach(item => {
    if (item.ServerRelativeUrl.indexOf("Forms") === -1) {
      upperArray.push(item.ServerRelativeUrl);
    }
  });

  // 收集所有子文件夹的递归调用Promise
  const subFolderTasks: Promise<void>[] = [];
  folderRes.Folders.forEach(item => {
    if (item.ServerRelativeUrl.indexOf("Forms") === -1) {
      upperArray.push(item.ServerRelativeUrl);
      subFolderTasks.push(this.getFiles(item.ServerRelativeUrl, upperArray));
    }
  });

  // 等待当前文件夹下所有子文件夹的递归调用全部执行完成
  await Promise.all(subFolderTasks);
}