3.RxJS - 运营商

我不是女神ヾ 2024-03-16 12:23 51阅读 0赞

大家好，欢迎回来，今天我介绍Operators的概念。  
运算符是函数。这不是很容易吗？运算符是 RxJS 中两种类型的函数：Creation或Pipeable。

**创建**  
创建运算符是简单的函数，它们的范围是创建新的可观察对象。

import {
         of } from "rxjs";
    
    of(1, 2, 3, 4).subscribe(x => console.log("[of] result", x));

[of] result 1
    [of] result 2
    [of] result 3
    [of] result 4

最常见的创建运算符是：ajax、empty、from、fromEvent、interval、of、throwError、timer、combineLatest、concat、forkJoin、merge 和 zip。

在下一篇文章中我会深入介绍这些类型的运算符，今天我只是对运算符的类型做一个概述。

**管道式**  
管道运算符是将一个 Observable 作为输入并返回另一个 observable 的函数。这些函数是纯函数，因此输入可观察值不会改变，但函数会返回一个新的。这些运算符的主要范围是：转换、过滤和处理输入可观察对象。  
可管道运算符的示例：

import {
         Observable } from "rxjs";
    import {
         map, tap } from "rxjs/operators";
    
    new Observable<number>(observer => {
        
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.next(4);
    
      observer.complete();
    })
      .pipe(
        map(val => val * 2),
        tap(res => {
        
          console.log("[pipeable tap]", res);
        })
      )
      .subscribe();

[pipeable tap] 2
    [pipeable tap] 4
    [pipeable tap] 6
    [pipeable tap] 8

管道运算符按范围划分，范围是：转换、过滤、连接、多播、错误处理、实用程序、条件和布尔值以及数学和聚合。

如您所知，您可以将 Creation 运算符与 Pipeable 运算符结合使用来管理您的业务逻辑，如下所示

import {
         timer } from "rxjs";
    import {
         take } from "rxjs/operators";
    
    timer(0, 1000)
      .pipe(take(10))
      .subscribe(x => console.log("[timer] result", x));

[timer] result 0
    [timer] result 1
    [timer] result 2
    [timer] result 3
    [timer] result 4
    [timer] result 5
    [timer] result 6
    [timer] result 7
    [timer] result 8
    [timer] result 9

在上一篇文章中，我介绍了 RxJS 库和响应式编程基础的所有支柱。在下一篇文章中，我们将开始探索运营商的世界。  
如果你喜欢我的文章，记得关注获取更多的信息。感谢您的阅读，祝您有美好的一天！