RxJS在angular中的应用

偏执的太偏执、 2022-10-01 07:43 187阅读 0赞

#### 前言 ####

RxJS在看文档后完全是一片懵，直到我在angular的应用中遇到很多需要实现的功能的时候...RxJS完美！

#### 什么是Observable? ####

Observable只是一个普通函数，要想让他有所作为，就需要跟observer一起使用；前者是受后者是攻。而这个observer（后面我们会介绍）只是一个带有 next、error、complete 的简单对象而已。最后，还需要通过 subscribe 订阅来启动Observable；否则它是不会有任何反应；可以理解为陌\*为了他们能在一起而提供的环境，而订阅也会返回一个可用于取消操作（在RxJS里叫 unsubscribe）。

当Observable设置观察者后，而连接并获取原始数据的这个过程叫生产者，可能是DOM中的 click 事件、input 事件、或者更加复杂的HTTP通信。

为了更好理解，先从一个简单的示例开始：

import { Component } from '@angular/core';
    import { Observable, Subscription } from 'rxjs';
    
    @Component({
      selector: 'app-home',
      template: `<input type="text"> `
    })
    export class HomeComponent {
      ngOnInit() {
        const node = document.querySelector('input[type=text]');
    
        // 第二个参数 input 是事件名，对于input元素有一个 oninput 事件用于接受用户输入
        const input$ = Observable.fromEvent(node, 'input');
        input$.subscribe({
          next: (event: any) => console.log(`You just typed ${event.target.value}!`),
          error: (err) => console.log(`Oops... ${err}`),
          complete: () => console.log(`Complete!`)
        });
      }
    }
    复制代码

示例中 Observable.fromEvent() 会返回一个Observable，并且监听 input 事件，当事件被触发后会发送一个 Event 给对应的observer观察者。

#### 什么是Observer? ####

observer非常简单，像上面示例中 subscribe 订阅就是接收一个 observer 方法。

一般在Angular我们 subscribe 会这么写：

input$.subscribe((event: any) => {
    });
    复制代码

从语法角度来讲和 `subscribe({ next, error, complete })` 是一样的。

当Observable产生一个新值时，会通知 observer 的 `next()`，而当捕获失败可以调用 `error()`。

当Observable被订阅后，除非调用observer的 `complete()` 或 `unsubscribe()` 取消订阅两情况以外；会一直将值传递给 observer。

Observable的生产的值允许经过一序列格式化或操作，最终得到一个有价值的数据给观察者，而这一切是由一序列链式operator来完成的，每一个operator都会产生一个新的Observable。而我们也称这一序列过程为：流。

#### 什么是operator？ ####

正如前面说到的，Observable可以链式写法，这意味着我们可以这样：

Observable.fromEvent(node, 'input')
      .map((event: any) => event.target.value)
      .filter(value => value.length >= 2)
      .subscribe(value => { console.log(value); });
    复制代码

下面是整个顺序步骤：

假设用户输入：a Observable对触发 oninput 事件作出反应，将值以参数的形式传递给observer的 next()。 map() 根据 event.target.value 的内容返回一个新的 Observable，并调用 next() 传递给下一个observer。 filter() 如果值长度 >=2 的话，则返回一个新的 Observable，并调用 next() 传递给下一个observer。 最后，将结果传递给 subscribe 订阅块。 你只要记住每一次 operator 都会返回一个新的 Observable，不管 operator 有多少个，最终只有最后一个 Observable 会被订阅。

不要忘记取消订阅。

##### 为什么需要取消订阅 #####

Observable 当有数据产生时才会推送给订阅者，所以它可能会无限次向订阅者推送数据。正因为如此，在Angular里面创建组件的时候务必要取消订阅操作，以避免内存泄漏，要知道在SPA世界里懂得擦屁股是一件必须的事。

##### unsubscribe #####

前面示例讲过，调用 subscribe() 后，会返回一个 Subscription 可用于取消操作 unsubscribe()。最合理的方式在 ngOnDestroy 调用它。

ngOnDestroy() {
        this.inputSubscription.unsubscribe();
    }
    复制代码

##### takeUnit #####

一个非常优雅的取消订阅方法

Observable.fromEvent(node, 'input')
      .takeUnit((event: any) => this.show)
      .subscribe(value => { console.log(value); });
    
    ngOnDestory(): void {
        this.show = false;
    }
    复制代码

#### Subject ####

如果说 Observable 与 observer 是攻受结合体的话，那么 Subject 就是一个人即攻亦受。正因为如此，我们在写一个`Service`用于数据传递时，总是使用 new Subject。下面展示一个例子：

@Injectable()
    export class MessageService {
        private subject = new Subject<any>();
    
        send(message: any) {
            this.subject.next(message);
        }
    
        get(): Observable<any> {
            return this.subject.asObservable();
        }
    }
    复制代码

当F组件需要向M组件传递数据时，我们可以在F组件中使用 send()。

constructor(myService: MyService)
    ngOnInit() {
        this.myService.send('message');
    }
    复制代码

M组件接收数据：

constructor(myService: MyService)
    ngOnInit() {
        this.myService.get.subscribe(data => {
            console.log(data); // message
        })
    }
    复制代码

#### EventEmitter ####

在angular中EventEmitter相当于是Subject

// my-component.component.ts
    @outPut() onChange = new EventEmitter<String>();
    
    onClick() {
        this.onChange.emit('hello world');
    }
    复制代码

<my-component onChange="change($event)"></my-component>
    复制代码

// parent-coponent.component.ts
    change(value) {
        console.log(value) // hello world
    }
    复制代码

#### 最后 ####

RxJS有很多操作符，详情见我的另一篇文章《RxJS(1) 常见Operators》。

转载于:https://juejin.im/post/5cf0db2f518825332550d16d