假设有一个简单的任务：页面上有一个按钮，当你点击按钮时，需要启动一个定时器。使用RxJS，我们可以轻松实现以上功能：上面的代码虽然可以正常运行，但是仍然存在两个问题：存在类似回调区的问题。我们必须手动处理每个订阅。让我们来看看高阶可观察量以及我们如何使用它们来使事情变得更容易。高阶Observables一个Observable对象可以发出任何类型的值：数字、字符串、对象等。这意味着Observable对象也可以发出Observable类型的值。与JavaScript高阶函数类似，高阶Observable意味着一个Observable对象在内部返回另一个Observable对象。至此，让我们更新上面的例子，以便更直观地理解上面的概念：import{fromEvent,interval}from'rxjs';从'rxjs/operators'导入{map}；constbutton=document.querySelector('button');constclick$=fromEvent(button,'click');constinterval$=interval(1000);constclicksToInterval$=click$.pipe(map(event=>{返回间隔$;}));clicksToInterval$。订阅（intervalObservable=>console.log（intervalObservable））；当用户单击按钮时，我们的地图运算符将返回一个间隔可观察对象。当我们订阅clicksToInterval$对象时，会发出intervalObservable对象。当您订阅clicksToInterval$对象时，控制台输出是intervalObservable对象。这里需要记住的是可观察对象是惰性的。如果要从一个可观察对象中获取值，必须进行订阅操作，如：clicksToInterval$.subscribe(intervalObservable=>{intervalObservable.subscribe(num=>{console.log(num);});});介绍完高阶可观察对象的概念，我们再介绍两个有用的算子来帮助我们解决上面提到的问题。mergeAll当内部observable发出时，通过将值合并到外部observable让我知道。mergeAll()运算符的底层操作与上面的示例相同。它获取内部的可观察对象，执行订阅操作，然后将值推送给观察者（Observer）对象。从'rxjs'导入{fromEvent,interval};从'rxjs/operators'导入{map,mergeAll};constclick$=fromEvent(button,'click');const间隔$=间隔(1000);constobservable$=click$.pipe(map(event=>{returninterval$;}));observable$.mergeAll().subscribe(num=>console.log(num));在上面的示例中，源可观察对象是clicks$observable对象，内部可观察对象是interval$observable对象。这是RxJS中的常见模式，因此有一个快捷方式可以实现相同的行为-mergeMap():mergeMap()<=>map()+mergeAll()constbutton=document.querySelector('button');constclick$=fromEvent(button,'click');constinterval$=interval(1000);constobservable$=click$.pipe(mergeMap(event=>{returninterval$;}));observable$.subscribe(num=>console.log(num));在上面的代码中，每当我们点击按钮时，我们都会调用interval$对象的subscribe()方法，这样就会产生多个独立的定时器。如果这就是您想要实现的目标，那很好。但如果只想保留一个数据源，则需要使用switch()运算符。switchLikemergeMap()但当源observable发出取消内部observable的任何先前订阅时。switch()用于取消先前的订阅并切换到新订阅。如果我们更新switch()操作符的代码，当我们多次点击按钮时，可以看到每次点击按钮，我们都会得到一个新的interval对象，而之前的interval对象会自动取消。constbutton=document.querySelector('button');constclick$=fromEvent(button,'click');const间隔$=间隔(1000);constobservable$=click$.pipe(map(event=>{returninterval$;}),switchAll());observable$.subscribe(num=>console.log(num));可以看到，点击按钮三次后，我们只有一个区间对象。相反，使用merge()运算符，我们将拥有三个独立的区间对象。当源发出新值时，切换运算符取消订阅先前的内部订阅对象。这也是RxJS中的常见模式，因此也有一个快捷方式可以实现相同的行为-switchMap():switchMap()<=>map()+switch()constbutton=document.querySelector('button');constclick$=fromEvent(button,'click');constinterval$=interval(1000);constobservable$=click$.pipe(switchMap(event=>{returninterval$;}));observable$.subscribe(num=>console.log(num));本文由多帖博客平台OpenWrite发布！
