Angular中Observable函数依据页面场景返回错误的实现方法

要在else分支返回一个抛出错误的Observable<Element[]>，可以使用RxJS的throwError操作符，它专门用于创建一个立即发出错误通知的Observable。

步骤1：导入throwError #

首先确保在组件/service文件顶部导入该操作符：

import { throwError } from 'rxjs';

步骤2：修改else分支代码 #

将else分支的return error??替换为：

return throwError(() => new Error('当前页面无法获取元素列表'));

这里使用工厂函数形式的throwError（RxJS 6+推荐写法），可以避免提前创建错误实例，提升性能。

完整代码示例 #

import { throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

// ... 其他代码

getElementList(): Observable<Element[]> {
  const isOnClubsPage: boolean = this.router.url.endsWith('/Clubs');
  const isOnPartenairePage: boolean = this.router.url.endsWith('/Partenaires');
  
  if (isOnClubsPage) {
    return this.http.get<Element[]>('api/Clubs').pipe(
      tap((clubList) => this.log(clubList)),
      catchError((error) => this.handleError(error, []))
    );
  } else if (isOnPartenairePage) {
    return this.http.get<Element[]>('api/Partenaires').pipe(
      tap((clubList) => this.log(clubList)),
      catchError((error) => this.handleError(error, []))
    );
  } else {
    // 返回抛出错误的Observable
    return throwError(() => new Error('当前页面不支持获取元素列表'));
  }
}

补充说明 #

• 当订阅这个Observable时，错误会被触发，你可以在订阅处通过catchError操作符处理，或者直接在组件中用subscribe的第三个错误回调接收：

  this.yourService.getElementList().subscribe({
    next: (list) => { /* 处理正常数据 */ },
    error: (err) => { /* 处理错误 */ }
  });
  

• 如果希望用你已有的handleError函数统一处理这个错误，也可以在throwError后添加pipe(catchError(...))：

  return throwError(() => new Error('当前页面不支持获取元素列表')).pipe(
    catchError((error) => this.handleError(error, []))
  );
  

内容的提问来源于stack exchange，提问作者Léandre