专栏首页finleyMaRxJS 5 到 6迁移指导

RxJS 5 到 6迁移指导

原文: https://rxjs-dev.firebaseapp.com/guide/v6/migration 转载地址: https://segmentfault.com/a/1190000014956260 节选

修改import路径

建议TypeScript开发人员使用rxjs-tslint来重构import路径。 RxJS团队设计了以下规则来帮助JavaScript开发人员重构import路径:

  • rxjs: 包含创建方法,类型,调度程序和工具库。

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

  • rxjs/operators: 包含所有的管道操作符

import { map, filter, scan } from 'rxjs/operators';

  • rxjs/webSocket: 包含websocket subject实现.

import { webSocket } from 'rxjs/webSocket';

  • rxjs/ajax: 包含Rx ajax实现.

import { ajax } from 'rxjs/ajax';

  • rxjs/testing: 包含RxJS的测试工具库.

import { TestScheduler } from 'rxjs/testing';

使用管道操作而不是链式操作

请按照如下步骤将您的链式操作替换为管道操作:

  • 从rxjs-operators中引入您需要的操作符

注意:由于与Javascript保留字冲突,以下运算符名字做了修改:do -> tap, catch -> catchError, switch -> switchAll, finally -> finalize

import { map, filter, catchError, mergeMap } from 'rxjs/operators';

  • 使用pipe()包裹所有的操作符方法。确保所有操作符间的.被移除,转而使用,连接。 记住!!!有些操作符的名称变了!!! 以下为升级示例:
// Rxjs5写法,操作符链
source
  .map(x => x + x)
  .mergeMap(n => of(n + 1, n + 2)
    .filter(x => x % 1 == 0)
    .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of('error found'))
  .subscribe(printResult);

// Rxjs写法,需要用pipe包一下所有的操作符

source.pipe(
  map(x => x + x),
  mergeMap(n => of(n + 1, n + 2).pipe(
    filter(x => x % 1 == 0),
    scan((acc, x) => acc + x, 0),
  )),
  catchError(err => of('error found')),
).subscribe(printResult);

注意我们在以上代码中嵌套使用了pipe()。 Ben Lesh在ng-conf 2018上解释了为什么我们应该使用管道操作符

其他RxJs6弃用

Observable.if and Observable.throw Observable.if已被iif()取代,Observable.throw已被throwError()取代。您可使用rxjs-tslint将这些废弃的成员方法修改为函数调用。

代码示例如下:

OBSERVABLE.IF > IIF() // deprecated Observable.if(test, a

);

// use instead

iif(test, a

); OBSERVABLE.ERROR > THROWERROR() // deprecated Observable.throw(new Error());

//use instead

throwError(new Error());

已弃用的方法

根据迁移指南,以下方法已被弃用或重构:

  • merge
import { merge } from 'rxjs/operators';
a$.pipe(merge(b$, c$));
// becomes
import { merge } from 'rxjs';
merge(a$, b$, c$);
  • concat
import { concat } from 'rxjs/operators';
a$.pipe(concat(b$, c$));
// becomes
import { concat } from 'rxjs';
concat(a$, b$, c$);
  • combineLatest
import { combineLatest } from 'rxjs/operators';
a$.pipe(combineLatest(b$, c$));
// becomes
import { combineLatest } from 'rxjs';
combineLatest(a$, b$, c$);
  • race
import { race } from 'rxjs/operators';
a$.pipe(race(b$, c$));
// becomes
import { race } from 'rxjs';
race(a$, b$, c$);
  • zip
import { zip } from 'rxjs/operators';
a$.pipe(zip(b$, c$));
// becomes
import { zip } from 'rxjs';
zip(a$, b$, c$);

总结

RxJS 6带来了一些重大改变,但是通过添加rxjs-compat软件包可以缓解这一问题,该软件包允许您在保持v5代码运行的同时逐渐迁移。对于Typescript用户,其他中包括大多数Angular开发人员,tslint提供了大量的自动重构功能,使转换变得更加简单。

任何升级与代码修改都会引入一些bug到代码库中。因此请务必测试您的功能以确保您的终端用户最终接受到相同的质量体验。

个人备注,现在网上大部分教程还是rxjs5的,rxjs6变化还是蛮大的,学习时候要留意区别。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular 表单2--响应式表单, 处理异步数据

    上一节中我们定义了一个响应式表单,其中表单数据是在定义的时候就初始化好的,但是很多时候数据需要异步获取,比如 打开一个编辑页面,需要

    mafeifan
  • Angular 正式环境禁止console显示

    开发人员在开发过程中有意无意的在代码中使用console.log查看变量内容进行调试。 在正式环境最好屏蔽掉这些信息。更好的习惯是console.log用完就...

    mafeifan
  • Laravel Vue 前后端分离 使用token认证

    在做前后台分离的项目中,认证是必须的,由于http是无状态的。前台用户登录成功后,后台给前台返回token。之后前台给后台发请求每次携带token。

    mafeifan
  • Java单元测试——Mock技术配置

    由于在这里AccountManager.java仅仅做了一个interface,我们主要Mock的是这个类。这几个类的类关系图如下:

    小老鼠
  • Docker + Elasticsearch 集群环境搭建

    无论是安装包形式还是基于Docker,搭建Elasticsearch集群环境还是较为简单的,实操的时候还遇到过一丢小问题,本文用于记录下操作过程。

    happyJared
  • NgModule imports定义的运行时数据结构

    这个方法实际上返回了一个module StoreFeatureModule,在运行时能够看到:

    Jerry Wang
  • 网页结构简介

    有人说“互联网中有50%以上的流量是爬虫”,第一次听这句话也许你会觉得这个说法实在太夸张了,怎么可能爬虫比用户还多呢?毕竟会爬虫的相对与不会爬虫的简直少之又少。

    测试小兵
  • React第三方组件6(状态管理之Mobx的使用①简单使用)

    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件6(状态管理之Mobx的使用①简单...

    前端人人
  • 图深度学习入门教程(七)——残差多层图注意力模型

    深度学习还没学完,怎么图深度学习又来了?别怕,这里有份系统教程,可以将0基础的你直接送到图深度学习。还会定期更新哦。

    代码医生工作室
  • 您值得收藏的关系代数与Sql练习网站及实战操作

    MySQL学习仓库Up-Up-MySQL,这是一个学习MySQL从入门实战到理论完善,再到精通的一个仓库,后面会把MySQL的学习资料上传上去!欢迎大家star...

    公众号guangcity

扫码关注云+社区

领取腾讯云代金券