如何使用 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);
        }
    })
}

附言：链接帖子 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/operator/catchError'导入{catchError};错误：从'rxjs/operator'导入{catchError};

• 静态不会分别更改，它们不可出租（请参阅 https://github.com/ReactiveX/rxjs/issues/3059）

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

Answer 2

基于David Dal Buscon的出色回答，我还分别将Observable.empty和Observable.throw更新为空和_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);
        })
     );
}