【Ionic 3】如何延迟文件下载至文件夹创建及权限确认完成？

看起来你的核心问题是在用户还未确认存储权限时，代码就已经开始执行文件操作（创建目录、下载），导致因为权限不足抛出错误。我们需要调整流程，确保先等待用户完成权限授权，再执行后续的文件操作。

问题分析 #

你的现有代码里，createDirectory虽然返回了Promise，但调用它的时候没有用await或者.then()来等待它完成；而且更关键的是，你没有显式处理存储权限的请求——Cordova的文件插件在第一次访问存储时会弹出权限弹窗，但如果在用户响应前就执行文件操作，会直接报错。

解决方案步骤 #

• 显式请求存储权限：使用Cordova的权限插件主动请求权限，等待用户授权后再继续。
• 用Async/Await串联异步流程：让权限请求、目录创建、文件下载按顺序执行，前一步完成后再走下一步。
• 修正Promise逻辑：清理createDirectory里无效的代码，确保Promise正确处理目录创建结果。

修正后的完整代码示例 #

// 先确保安装对应权限插件：
// ionic cordova plugin add cordova-plugin-android-permissions
// npm install @ionic-native/android-permissions/ngx

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

// 在组件构造函数中注入依赖
constructor(
  private alertCtrl: AlertController,
  private transfer: FileTransfer,
  private file: File,
  private platform: Platform,
  private androidPermissions: AndroidPermissions
) {}

async downloadImage(imageURL: string) {
  try {
    // 1. 等待平台完全就绪
    await this.platform.ready();

    // 2. 处理Android存储权限请求（iOS可适配类似逻辑）
    if (this.platform.is('android')) {
      // 先检查是否已有权限
      const permissionStatus = await this.androidPermissions.checkPermission(
        this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE
      );
      
      if (!permissionStatus.hasPermission) {
        // 请求权限，等待用户响应
        const requestResult = await this.androidPermissions.requestPermission(
          this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE
        );
        
        if (!requestResult.hasPermission) {
          // 用户拒绝权限，提示无法继续
          const alert = await this.alertCtrl.create({
            title: '权限不足',
            subTitle: '需要存储权限才能下载文件，请在设置中开启权限',
            buttons: ['确认']
          });
          await alert.present();
          return;
        }
      }
    }

    // 3. 等待目录创建完成
    const folderName = 'FolderName';
    const directoryCreated = await this.createDirectory(folderName);
    if (!directoryCreated) {
      throw new Error('目录创建失败');
    }

    // 4. 执行文件下载
    const fileTransfer: FileTransferObject = this.transfer.create();
    const imageName = imageURL.split('/').pop();
    const entry = await fileTransfer.download(
      imageURL,
      `${this.storageDirectory}${folderName}/${imageName}`
    );

    // 下载成功提示
    const alertSuccess = await this.alertCtrl.create({
      title: '下载成功！',
      subTitle: `${imageURL} 已成功下载至：${entry.toURL()}`,
      buttons: ['确定']
    });
    await alertSuccess.present();

  } catch (error: any) {
    console.error('下载流程出错:', error);
    // 统一处理错误提示
    const alertFailure = await this.alertCtrl.create({
      title: '下载失败！',
      subTitle: `${imageURL} 下载失败。错误信息：${error.message || error.code}`,
      buttons: ['确定']
    });
    await alertFailure.present();
  }
}

createDirectory(folderName: string): Promise<boolean> {
  return new Promise((resolve, reject) => {
    if (!this.platform.is('cordova')) {
      console.warn('非Cordova环境，跳过目录创建');
      resolve(false);
      return;
    }

    // 根据平台设置存储目录
    if (this.platform.is('ios')) {
      this.storageDirectory = this.file.externalRootDirectory;
    } else if (this.platform.is('android')) {
      this.storageDirectory = this.file.externalRootDirectory;
    } else {
      console.warn('不支持的平台');
      resolve(false);
      return;
    }

    // 创建目录，false表示目录已存在时不报错
    this.file.createDir(this.storageDirectory, folderName, false)
      .then(() => resolve(true))
      .catch((error) => {
        console.error('创建目录出错:', error);
        reject(false);
      });
  });
}

关键调整说明 #

• 权限请求前置：把权限检查和请求放在所有文件操作之前，确保用户授权后才继续执行后续逻辑。
• Async/Await流程控制：用async标记主方法，所有异步操作都用await等待完成，彻底避免时序混乱。
• 统一错误处理：用try/catch包裹整个流程，集中处理所有环节的错误，让代码更清晰。
• 清理无效代码：移除了createDirectory里无用的setTimeout，确保Promise能正确反馈目录创建的结果。

iOS适配提示 #

iOS的权限处理逻辑类似，你可以使用cordova-plugin-ios-permissions插件，请求PHOTO_LIBRARY权限，流程和Android一致。

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