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

Dav*_*sco 5 rxjs ionic-framework rxjs5 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);
        }
    })
}
Run Code Online (Sandbox Code Playgroud)

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

Dav*_*sco 9

我想出了以下更新的代码仍然有效(测试它).

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);
            }
        })
    );
}
Run Code Online (Sandbox Code Playgroud)

注意:

  • 必须使用完整导入路径导入可调运算符以减小包大小

    好:从'rxjs/operators/catchError'导入{catchError}; 错误:从'rxjs /运算符'导入{catchError};

  • 静态不会分别改变它们是不可放弃的(参见https://github.com/ReactiveX/rxjs/issues/3059)

  • 静态只能在app.component.ts中为所有应用程序导入一次(这不会减少包大小,但代码会更清晰)