Angularfire2 v5中Firebase Storage错误捕获方法咨询

嘿，我来帮你搞定Angularfire2 v5.0.0-rc.5-next里Firebase Storage的Observable错误捕获问题～

首先要注意：RxJS 5+（这个版本的Angularfire2依赖的就是它）已经把旧的catch操作符改名为catchError，而且所有操作符都需要通过pipe()方法来链式调用，不能像Promise那样直接加.catch()啦。下面给你两种实用的错误处理方式：

方式一：用catchError在管道内处理错误 #

这种方式适合需要在错误发生时转换Observable流（比如返回默认值）的场景：

1. 先导入必要的RxJS操作符：

import { take, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

2. 修改你的代码，加入错误捕获逻辑：

const avatarRef = this.afStorage.ref(`${userId}/avatar/${this.avatarThumbnail}${user.avatar}`);
avatarRef.getDownloadURL()
  .pipe(
    take(1),
    catchError((error) => {
      // 根据Firebase错误码判断具体错误类型
      if (error.code === 'storage/object-not-found') {
        console.log('对应的存储对象不存在哦');
        // 返回默认头像URL，或者你需要的默认值
        return of('https://your-domain.com/default-avatar.png');
      } else {
        // 处理其他Storage错误
        console.error('Storage请求出错:', error);
        // 也可以返回null，或者重新抛出错误
        return of(null);
      }
    })
  )
  .subscribe((avatarUrl) => {
    resolve(avatarUrl);
  });

方式二：在subscribe中直接处理错误 #

如果不需要转换流，只是想在订阅时处理错误，直接给subscribe传第二个错误回调参数就行：

const avatarRef = this.afStorage.ref(`${userId}/avatar/${this.avatarThumbnail}${user.avatar}`);
avatarRef.getDownloadURL()
  .pipe(take(1))
  .subscribe(
    (avatarUrl) => {
      resolve(avatarUrl);
    },
    (error) => {
      if (error.code === 'storage/object-not-found') {
        // 处理对象不存在的情况，比如返回默认值
        resolve('https://your-domain.com/default-avatar.png');
      } else {
        // 其他错误处理，比如拒绝Promise
        console.error('Storage错误:', error);
        reject(error);
      }
    }
  );

小提示 #

Firebase Storage的错误码都是storage/xxx格式的，除了storage/object-not-found，你还可以根据需求处理其他常见错误，比如storage/unauthorized（权限不足）、storage/canceled（请求被取消）等。

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