What’s New in RxJS v6.5

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

New Fetch Observable

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

代码语言：javascript复制

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中可以支持传入对象类型了

代码语言：javascript复制

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])。译者注：增强了可读性

代码语言：javascript复制

// 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 标题区域才是我们想要的值，点击其他区域我们依然做处理。

代码语言：javascript复制

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等其他方法被废弃

代码语言：javascript复制

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

rxjs javascript

0 人点赞