如何使用RXJS 5.5.2更新更好地捕获/执行/清空 [英] How to better catch/do/empty with RXJS 5.5.2 Updates

问题描述

作为离子角3.9.0发行说明中的​​状态（ https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md ），利用更新到RXJS 5.5.2的优势可以减少捆绑包大小，从而加快启动时间

As staten in the ionic-angular 3.9.0 release notes (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md), using the advantages of updating to RXJS 5.5.2 could reduce the bundle size and therefore lead to a faster boot time

酷，酷，酷:)：

Ionic提供的示例，例如 debounceTime 非常清楚，我明白了。

The example provided by Ionic, to migrate for example debounceTime is pretty clear, I get it.

但是我不清楚我应该如何更新以下代码来获取充分利用这个RXJS更新。

But it's pretty unclear to me how I should update my following code to take the full advantage of this RXJS update.

任何人都可以帮我转换它或如何更好地编写它以保存包大小？

Anyone could help me to convert it or how to better write it with the goal to save bundle size?

 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

推荐答案

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

I came up with the following updated code which still works (tested it).

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

注：

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

• Lettable operators have to be imported with a full import path to reduce the bundle size

好：从'导入{catchError} rxjs /运营商/ catchError';
错误：从'rxjs /运算符'导入{catchError};

Good: import {catchError} from 'rxjs/operators/catchError'; Bad: import {catchError} from 'rxjs/operators';

静态不会分别改变它们是不可释放的（参见 https://github.com/ReactiveX/rxjs/issues/3059 ）

Static doesn't change respectively they are not lettable (see https://github.com/ReactiveX/rxjs/issues/3059)

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

Static could be only imported once in app.component.ts for the all app (this won't reduce the bundle size but the code will be cleaner)

这篇关于如何使用RXJS 5.5.2更新更好地捕获/执行/清空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！