如何使用 RXJS 5.5.2 更新更好地捕获/执行/清空

Question

正如 ionic-Angular 3.9.0 发行说明中所述（https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md），利用更新到 RXJS 5.5.2 的优势可以减少捆绑包大小，从而缩短启动时间

酷，酷，酷:)

Ionic 提供的示例，例如迁移

debounceTime

非常清楚，我明白了。

但是我很不清楚应该如何更新以下代码才能充分利用此 RXJS 更新。

任何人都可以帮助我转换它或者如何更好地编写它以节省包大小？

 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/empty';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/catch';

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req).do((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
            // do stuff with response if you want
        }
    }).catch((err: HttpErrorResponse) => {
        if ((err.status == 400) || (err.status == 401)) {
            this.interceptorRedirectService.getInterceptedSource().next(err.status);
            return Observable.empty();
        } else {
            return Observable.throw(err);
        }
    })
}

PS：链接帖子https://forum.ionicframework.com/t/how-to-better-catch-do-empty-with-rxjs-5-5-2-updates/111559

Answer 1

我想出了以下仍然有效的更新代码（经过测试）。

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/empty';
import {tap} from 'rxjs/operators/tap';
import {catchError} from 'rxjs/operators/catchError';

intercept(req: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>> {

       return next.handle(req).pipe(
        tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                // do stuff with response if you want
            }
        }),
        catchError((err: HttpErrorResponse) => {
            if ((err.status == 400) || (err.status == 401)) {
                this.interceptorRedirectService.getInterceptedSource().next(err.status);
                return Observable.empty();
            } else {
                return Observable.throw(err);
            }
        })
    );
}

注：

• 可出租运算符必须使用完整的导入路径导入，以减少包大小

  好：从 'rxjs/operators/catchError' 导入 {catchError}； 不好：从 'rxjs/operators' 导入 {catchError};

• 静态不会改变，它们不可出租（参见https://github.com/ReactiveX/rxjs/issues/3059）

• 静态只能在所有应用程序的 app.component.ts 中导入一次（这不会减少包大小，但代码会更干净）

Answer 2

基于 David Dal Buscon 的出色回答，我还分别将 Observable.empty 和 Observable.throw 更新为 empty 和 _throw

import {Observable} from 'rxjs/Observable';
import {empty} from 'rxjs/observable/empty';
import {_throw} from 'rxjs/observable/throw';
import {catchError, tap} from 'rxjs/operators';

intercept(req: HttpRequest<any>, next: HttpHandler):       
  Observable<HttpEvent<any>> {
    return next.handle(req)
      .pipe(
        tap((event: HttpEvent<any>) => {
          if (event instanceof HttpResponse) {
            // do stuff with response if you want
          }
        }),
        catchError((err: HttpErrorResponse) => {
          if ((err.status == 400) || (err.status == 401)) {                         
            this.interceptorRedirectService.getInterceptedSource()
              .next(err.status);
            return empty();
          }

          return _throw(err);
        })
     );
}

Answer 3

Angular 17，RxJS 7.8.1。由于这里几乎不推荐使用所有答案，这就是我返回空 Observable 的方法：

import { catchError, EMPTY } from 'rxjs';

  test(): void {
    this.testService
      .startTestJob()
      .pipe(
        catchError((err) => {
          this.snackIt.addError('error:', err);
          return EMPTY;
        })
      )
      .subscribe();
  }