如何通过 RXJS 5.5.2 更新更好地 catch/do/empty

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);
        }
    })
}

P.S.: 链接 post 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';
静态不变，它们是不可出租的（见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);
        })
     );
}

如何通过 RXJS 5.5.2 更新更好地 catch/do/empty

How to better catch/do/empty with RXJS 5.5.2 Updates

rxjs

ionic-framework

rxjs5

angular