Ionic Angular服务中如何正确递归调用Promise并返回结果？

我明白你遇到的困扰了——递归调用Promise时，结果没能正确传递到最外层的调用链，导致原始调用一直拿不到最终的本地图片URL。核心问题在于你递归时没有维护Promise链的连续性，而是手动调用fulfill打断了链的传递。

问题根源分析 #

你的代码里有两处关键的链断裂点：

1. 目录不存在时，创建目录后你用instance.getBgForName(name).then((url) => {fulfill(url)})手动触发fulfill，但没有把递归生成的Promise和外层Promise关联起来；
2. 文件不存在时，下载完成后同样手动处理递归结果，没有将其返回给上层Promise链；
   另外，手动包裹的new Promise属于Promise反模式——因为checkDir本身就返回Promise，完全可以直接链式调用，不需要手动管理fulfill/reject。

修复后的Promise链式版本 #

我们重构代码，让Promise链自然传递，同时用箭头函数简化this绑定，去掉冗余的var instance = this：

public getBgForName = (name: string) => { 
  const lowerName = name.toLowerCase(); 
  const baseDir = this.file.dataDirectory;

  return this.file.checkDir(baseDir, lowerName)
    .then(() => {
      // 目录存在，检查目标文件
      const targetDir = `${baseDir}/${lowerName}/`;
      return this.file.checkFile(targetDir, 'bg.jpg')
        .then(() => {
          // 文件已存在，直接返回本地URL
          console.log('read file');
          return `${targetDir}bg.jpg`;
        })
        .catch(() => {
          // 文件不存在，下载后递归调用
          console.log('needs to download file!');
          const downloadUrl = encodeURI(`https://host.tld/${lowerName}/bg.jpg`);
          return this.transfer.create().download(downloadUrl, `${targetDir}bg.jpg`, true, {})
            .then(() => this.getBgForName(lowerName)) // 直接返回递归Promise
            .catch(err => {
              console.error('下载失败:', err);
              throw err; // 抛出错误让上层调用者捕获
            });
        });
    })
    .catch(() => {
      // 目录不存在，创建后递归调用
      return this.file.createDir(baseDir, lowerName, true)
        .then(() => this.getBgForName(lowerName)); // 直接返回递归Promise
    });
}

关键修改说明 #

1. 移除手动外层Promise：直接返回checkDir的Promise链，避免手动管理fulfill/reject的风险；
2. 递归时直接返回Promise：创建目录或下载文件后，直接返回this.getBgForName(lowerName)，让递归结果自动融入上层链，最终传递给最外层调用者；
3. 箭头函数简化this绑定：箭头函数会捕获外层上下文的this，无需额外保存实例引用；
4. 完善错误处理：下载失败时抛出错误，让调用者可以通过.catch捕获异常，而不是仅打印日志。

更易读的Async/Await版本 #

如果你的项目支持ES2017+，用async/await能让逻辑更直观，代码可读性更高：

public async getBgForName(name: string): Promise<string> { 
  const lowerName = name.toLowerCase(); 
  const baseDir = this.file.dataDirectory;
  const targetDir = `${baseDir}/${lowerName}/`;
  const targetFile = `${targetDir}bg.jpg`;

  try {
    // 检查目录是否存在
    await this.file.checkDir(baseDir, lowerName);
  } catch {
    // 目录不存在则创建，之后递归重新走流程
    await this.file.createDir(baseDir, lowerName, true);
    return this.getBgForName(lowerName);
  }

  try {
    // 检查文件是否存在
    await this.file.checkFile(targetDir, 'bg.jpg');
    console.log('read file');
    return targetFile;
  } catch {
    // 文件不存在则下载，之后递归返回结果
    console.log('needs to download file!');
    const downloadUrl = encodeURI(`https://host.tld/${lowerName}/bg.jpg`);
    await this.transfer.create().download(downloadUrl, targetFile, true, {});
    return this.getBgForName(lowerName);
  }
}

这个版本用try/catch替代Promise的.catch，逻辑和链式版本完全一致，但递归的返回逻辑更直接，可读性大幅提升。

现在你调用getBgForName时，无论目录和文件是否存在，最终都会正确返回本地图片的URL——因为整个Promise链是连续的，递归的结果会一直传递到最外层的调用者。

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