What’s New in RxJS v6.5

mafeifan

发布于 2019-05-20 10:26:54

8260

发布于 2019-05-20 10:26:54

文章被收录于专栏：finleyMafinleyMa

RxJS 已于上月2019.4.23发布。来看下带来了哪些新功能

New Fetch Observable

基于原生的 fetch API，RxJS 进行了封装并提供了 fromFetch 方法，也就是利用原生的fetch发http请求并返回为Observable 类型。而且还支持通过基于原生的FetchController 实现取消发送中的请求。

import { of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';

const users$ = fromFetch('https://reqres.in/api/users').pipe(
  switchMap(response => {
    if (response.ok) {
      return response.json();
    } else {
      return of({ error: true, message: `Error ${response.status}` });
    }
  }),
  catchError((error) => of({ error: true, message: error.message }))
);


users$.subscribe({ next(data) { ... }, complete() { ... } });

forkJoin 增强

forkJoin 类似 promise.all() 用于同时处理多个 Observable 在v6.5中可以支持传入对象类型了

import { forkJoin, timer } from 'rxjs';
import { take, mapTo } from 'rxjs/operators';

const source = forkJoin({
  todos: timer(500).pipe(mapTo([{ title: 'RxJS'}])),
  user: timer(500).pipe(mapTo({ id: 1 }))
});

source.subscribe({
  next({ todos, user }) { }
});

此外，不再支持 forkJoin(a, b, c, d) 形式，建议传入数组，如 forkJoin([a, b, c, d])。译者注：增强了可读性

// DEPRECATED 
forkJoin(of(1), of(2)).subscribe();

// use an array instead
forkJoin([of(1), of(2)]).subscribe();

在线例子：https://stackblitz.com/edit/forkjoin-65

Partition Observable

Partition 能够将 source observable 分成两个 observables，一个利用放满足时的预测值，一个是不满足时候的值。

比如页面中，当鼠标点击 h1 标题区域才是我们想要的值，点击其他区域我们依然做处理。

import { fromEvent, partition } from 'rxjs';

const clicks$ = fromEvent(document, 'click');

const [clicksOnH1$, clicksElsewhere$] =
  partition(clicks$, event => event.target.tagName === 'H1');


clicksOnH1$.subscribe({
  next() { console.log('clicked on h1') }
});

clicksElsewhere$
  .subscribe({
    next() {
      console.log('Other clicked')
    }
  });

combineLatest 被废弃

combineLatest 目前只会保留 combineLatest([a, b, c]) 这一种使用方法，原因可以看这里.

Schedulers

添加 scheduled 函数来创建 a scheduled observable of values。from、range等其他方法被废弃

import { of, scheduled, asapScheduler } from 'rxjs';

console.log(1);

// DEPRECATED
// of(2, asapScheduler).subscribe({
//   next(value) {
//     console.log(value);
//   }
// });

scheduled(of(2), asapScheduler).subscribe({
  next(value) {
    console.log(value);
  }
});

console.log(3)

输出结果是 1 3 2

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.05.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

rxjs

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

rxjs

javascript

登录后参与评论

0 条评论

热度