学习RxJs的基础知识

105 阅读3分钟

RxJs(Reactive Extensions for JavaScript)是一个使用观察变量的反应式编程库,使其更容易构成异步或基于回调的代码。让我们利用RxJs的观察变量来学习它。

什么是RxJS?

RxJs是一个使用可观察序列来组成异步和基于事件的程序的库。它提供了一个核心类型,即Observable,卫星类型(Observer,Schedulers,Subjects)和受Array#extras启发的操作符(map,filter,reduce,every等),以允许处理异步事件的集合。

RxJs的主要目标是轻松处理异步数据流。

RxJs中的可观察变量和观察者

Learn rxjs : Observables and Observers观察 者代表异步数据流 观察者代表对该数据流感兴趣的听众。 一个可观察的函数创建一个观察者,并将其附加到期望值的源头,例如,点击,来自dom元素的鼠标事件,HTTP请求等。

观察者 是一个具有next()、error()和complete()方法的对象,当与观察者发生交互时,即源头发生交互时,例如,按钮点击、HTTP请求等,观察者就 会被调用。

订阅

当观测器被创建后,为了执行观测器,我们需要对其进行订阅。它也可以用来取消执行。这是因为观察者和观察者只不过是RxJS的对象;观察者代表Async数据流,而观察者只不过是订阅该观察者并监听该数据流和接收数据流的函数。
Learn rxjs : Subscription订阅方法的目的是将Async数据与监听器连接起来。

操作者Learn rxjs : Operators

操作符并不重要,但它们是一小段逻辑,可以将一个可观察流转换为另一个可观察流。观察者什么都不是,但它们是一小段逻辑,你可以将其插入管线中,在RxJs操作者的帮助下,你可以应用过滤器、地图和排序。

主体Learn rxjs : Subject

主体是可以多播的观察者,即与许多观察者交谈。例如,考虑一个带有事件监听器的按钮。每次用户点击按钮时,使用添加监听器附加到事件的函数就会被调用。类似的功能也适用于主题。

雇用具有无可比拟的灵活性的Java开发人员

如何 使用RxJS与ES6?

有几种方法可以将RxJS与库添加到你的项目中。 使用 npm, 你可以使用以下命令。

npm install Rxjs

注意: RxJS 6是Angular 6开始的强制依赖项,所以你不需要手动安装它。

例子

import { Component, OnDestroy, OnInit } from '@angular/core';

 import { Observable } from 'Rxjs';

 import { filter, map } from 'Rxjs/operators';

 @Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  })

 export class AppComponent implements OnInit, OnDestroy {

  name = 'Angular';

  streamsubscribe: any;

  AsyncStream(observer) {

    var t1 = setInterval(() => {

      observer.next(Math.random() * 10);

    }, 1000);

  }

  myobserv = Observable.create(this.AsyncStream);

  mainstreamobservable = Observable.create(this.AsyncStream);

  step1stream = this.mainstreamobservable.pipe(

    map((x: number) => Math.round(x))

  );

  step2stream = this.step1stream.pipe(filter((x: number) => x > 4));

  ngOnInit() {

    this.streamsubscribe = this.step2stream.subscribe((res) =>

      this.Listener(res)

    );

  }

  Listener(res: any) {

    console.log(res);

  }

  ngOnDestroy() {

    this.streamsubscribe.unSubscribe();

  }

 }

RxJs演示: 点击这里Rxjs demo

coma

结语

在这篇博客中,我们向你介绍了RxJs,以及我们如何使用它们为我们的应用程序添加一些魔力。RxJs可以用在许多不同的方面,而且很容易使用。