Observables在JavaScript编程中有什么用

小编给大家分享一下Observables在JavaScript编程中有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

安装 RxJS 库

要开始讨论 Observables， 我们首先安装 RxJS 库，如下所示： 

npm install rxjs

 RxJS 库已经包括由 Typescript 所需的申报文件，所以没有必要单独使用@types安装它们。 

要生成一个 Observable，我们可以使用 of， 如下函数： 

import { of, Observable } from "rxjs";  

const emitter : Observable<number> = of(1, 2, 3, 4);

在这里，我们首先从rxjs库中导入 of 函数和 Observable类型 。然后我们定义一个名为emitter的常量变量 ，它使用通用语法将其类型定义为类型number的 Observable  。然后我们将of函数的结果分配给 发射器变量，这将创建一个从数字 1 到 4 的 Observable。我们现在可以创建一个 Observer，如下所示： 

emitter.subscribe((value: number) => { 
    console.log(`value: ${value}`) 
});

在这里，我们调用变量emitter上的subscribe函数。由于 emitter 变量是 Observable 类型，它会自动公开 subscribe 函数以注册Observers。subscribe 函数将一个函数作为参数，该函数将为 Observable 发出的每个值调用一次。这段代码的输出如下： 

value: 1 
value: 2 
value: 3 
value: 4

在这里，我们可以看到我们传递给 subscribe 函数的函数确实为 Observable 发出的每个值调用了一次。 

请注意，只有在Observable上调用subscribe 函数时，Observable 才会开始发出值。调用该 subscribe 函数称为订阅 Observable，而 Observable 产生的值也称为 Observable 流。 

of 函数有一个名为 from的伙伴函数，它使用一个数组作为 Observable 的输入，如下所示： 

const emitArray : Observable<number> = from([1, 2, 3, 4]); 
 
emitArray.subscribe((value: number) => { 
    console.log(`arr: ${value}`); 
});

在这里，我们有一个名为emitArray的变量 ，它的类型是 Observable<number>，并且正在使用该 from 函数从数组中创建一个 Observable。同样，我们对名为emitArray 的 Observable 上调用subscribe函数 ，并为 Observable 发出的每个值提供一个要调用的函数。这段代码的输出如下： 

arr: 1 
arr: 2 
arr: 3 
arr: 4

在这里，我们可以看到 from 函数已经从数组输入创建了一个 Observable 流，并且我们提供给 subscribe 函数的函数正在为Observable 发出的每个值都调用一次。 

Pipe 和 Map 

RxJS 库为所有的 Observable 提供了一个 pipe 函数， 类似 subscribe 函数。该 pipe函数将可变数量的函数作为参数，并将对 Observable 发出的每个值执行这些函数。提供给 pipe 函数的函数通常称为 Observable 操作符，它们都接受一个 Observable 作为输入，并返回一个 Observable 作为输出。 pipe 函数发出一个 Observable 流。 

这个概念最好通过阅读一些代码来解释，如下例所示： 

import { map } from "rxjs/operators"; 
const emitter = of(1, 2, 3, 4); 
 
const modulus = emitter.pipe( 
    map((value: number) => { 
        console.log(`received : ${value}`); 
        return value % 2; 
    })); 
 
modulus.subscribe((value: number) => { 
    console.log(`modulus : ${value}`); 
});

在这里，我们从一个名为emitter的 Observable 开始 ，它将发射值 1 到 4。然后我们定义一个名为modulus 的变量来保存对emitter Observable调用pipe 函数的结果 。我们为pipe 函数提供的的唯一参数是对map 函数的调用 ，它是 RxJS的运算符函数之一。 

map 函数将单个函数作为参数，并将为 Observable 发出的每个值调用此函数。该 map 函数用于将一个值映射到另一个值，或以某种方式修改发出的值。在此示例中，我们返回将 2 的模数应用于每个值的结果。 

最后，我们订阅 Observable 并将其值记录到控制台。这段代码的输出如下： 

received : 1 
modulus : 1 
received : 2 
modulus : 0 
received : 3 
modulus : 1 
received : 4 
modulus : 0

在这里，我们可以看到 emitter Observable 发出 1 到 4 的值，并且 modules Observable正在为接收到的每个值发出的Modules 2。  

请注意，在这些代码示例中，我们没有明确设置 Observable 的类型。 

emitter Observable和modules Observable可以显式类型如下： 

const emitter : Observable<number> = of(1, 2, 3, 4); 
 
const modulus : Observable<number> = emitter.pipe(  
    ... 
);

在这里，我们指定了 emitter Observable 和modules Observable 的类型。这不是绝对必要的，因为 TypeScript 编译器会在使用 Observables 时确定正确的返回类型。然而，它确实明确说明了我们对 Observable 流的期望，并且在更大或更复杂的 Observable 转换中，明确设置预期的返回类型使代码更具可读性并可以防止错误。 

组合运算符 

 pipe 函数允许我们组合多个运算符函数，每个函数都将应用于 Observable 发出的值。考虑以下代码： 

const emitter = of(1, 2, 3, 4); 
 
const stringMap = emitter.pipe( 
    map((value: number) => { return value * 2 }), 
    map((value: number) => { return `str_${value}` }) 
); 
 
stringMap.subscribe((value: string) => { 
    console.log(`stringMap emitted : ${value}`); 
});

在这里，我们有一个Observable的命名 emitter ，它将发射值 1 到 4。然后我们有一个名为stringMap的变量  ，用于保存 emitter Observable的pipe 函数的结果 。在这个 pipe 函数中，我们有两个 map 函数。第一个 map 函数将传入的数值乘以 2，第二个 map 函数将其转换为带有前缀的字符串 str_。 

然后我们订阅 Observable 并将每个值记录到控制台。这段代码的输出如下： 

stringMap emitted : str_2 
stringMap emitted : str_4 
stringMap emitted : str_6 
stringMap emitted : str_8

在这里，我们可以看到两个 map 函数都应用于emitter Observable发出的每个值 。请注意 ，在我们的第二个 map 函数中，我们实际上已经将每个值的类型从 number 类型修改为 string 类型。 这就是为什么在我们的函数中为value 参数指定 subscribe的类型是 string 类型的原因。 

以上是“Observables在JavaScript编程中有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！