RxJS之组合操作符 ( Angular环境 )

RxJS之组合操作符 ( Angular环境 )

大家好,又见面了,我是你们的朋友全栈君。

一 merge操作符

把多个 Observables 的值混合到一个 Observable 中

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { range } from 'rxjs/observable/range';
import { merge } from 'rxjs/observable/merge';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const low: Observable<number> = range(100, 3);
    const middle: Observable<number> = range(200, 3);
    const high: Observable<number> = range(300, 3);
    merge(low, middle, high).subscribe((val: number) => {
      console.log(val);
    });
  }

}

RxJS之组合操作符 ( Angular环境 )

合并是没有顺序的:先到达的值在合并后的Observable中先输出。

import { Component, OnInit } from '@angular/core';
import { merge } from 'rxjs/observable/merge';
import { interval } from 'rxjs/observable/interval';
import { map } from 'rxjs/operators/map';
import { delay } from 'rxjs/operators/delay';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    let count = 0;
    const subscription = merge(
      interval(30).pipe(map(val => val + 300)),
      interval(40).pipe(map(val => val + 400)),
      interval(50).pipe(map(val => val + 500))
    ).pipe(delay(3000)) // 合并后的Observable,延迟3秒再开始的输出
      .subscribe(
        val => {
          count++;
          console.log(val);
          if (count >= 10) { // 只输出10个数
            subscription.unsubscribe();
          }
        }
      );
  }

}

RxJS之组合操作符 ( Angular环境 )

 二 forkJoin操作符

forkJoin will wait for all passed Observables to complete and then it will emit an array with last values from corresponding Observables.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    forkJoin(
      of(1, 3, 5, 7),
      of(2, 4, 6, 8)
    ).subscribe(
      (arr: number[]) => {
        console.log(`next: ${arr[0]}, ${arr[1]}`);
      },
      null,
      () => {
        console.log('complete.');
      }
    );
  }

}

RxJS之组合操作符 ( Angular环境 )

处理并行的多个ajax请求 ( safari停止跨域限制 )

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor(public http: HttpClient) { }

  ngOnInit() {
    forkJoin(
      this.http.get('https://www.baidu.com', { responseType: 'text' }),
      this.http.get('https://www.sogou.com', { responseType: 'text' })
    ).subscribe(
      (arr: any[]) => {
        const baidu = arr[0].substring(arr[0].indexOf('<title>') + 7, arr[0].indexOf('</title>'));
        const sogou = arr[1].substring(arr[1].indexOf('<title>') + 7, arr[1].indexOf('</title>'));
        console.log(baidu);
        console.log(sogou);
      }
    );
  }
}

RxJS之组合操作符 ( Angular环境 )

三 startWith操作符

返回的 Observable 会先发出作为参数指定的项,然后再发出由源 Observable 所发出的项。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs/observable/of';
import { startWith } from 'rxjs/operators/startWith';

@Component({
  selector: 'app-combine',
  templateUrl: './combine.component.html',
  styleUrls: ['./combine.component.css']
})
export class CombineComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
    of('Mikey', 'Don').pipe(
      startWith('Leo', 'Raph')
    ).subscribe(
      (val: string) => {
        console.log(val);
      }
    );
  }
}

RxJS之组合操作符 ( Angular环境 )

 

转载于:https://www.cnblogs.com/sea-breeze/p/8969158.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107554.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • voliate关键字原理

    voliate关键字原理被volatile修饰的变量在编译成字节码文件时会多个lock指令,该指令在执行过程中会生成相应的内存屏障,以此来解决可见性跟重排序的问题。voliate关键字作用静止重排序保证变量赋值操作的顺序与程序代码中的执行顺序一致。线程可见性原理使用场景…

  • Linux抓包命令tcpdump「建议收藏」

    Linux抓包命令tcpdump「建议收藏」tcpdump是一个抓包工具,用于抓取互联网上传输的数据包tcpdump是一个用于截取网络分组,并输出分组内容的工具。凭借强大的功能和灵活的截取策略,使其成为类UNIX系统下用于网络分析和问题排查的首选工具tcpdump支持针对网络层、协议、主机、网络或端口的过滤,并提供and、or、not等逻辑语句来帮助你去掉无用的信息#常用选项-i#监听哪一个网卡-n #不把ip解析成主机名-nn #不把端口解析成应用层协议-c #指定抓包的数量-S #不把随机序

  • Linux cpu性能问题排查

    Linux cpu性能问题排查

  • linux系统chmod 755权限

    linux系统chmod 755权限最近学习Lua,写脚本./执行遇到-bash:./helloworld.lua:Permissiondenied提示,意思是没有可执行权限;通过查看使用:sudochmod755helloworld.lua给脚本添加可执行权限正常执行;ll查看文件发现-rwxr-xr-x1rootroot65Oct2119:13helloworld.lua多了读写可执行权限;下面对这些…

  • SSM框架面试题总结[通俗易懂]

    SSM框架面试题总结[通俗易懂]Spring如何实现一个IOC容器配置文件配置包扫描路径递归包扫描获取.class文件反射,确定需要交给IOC管理的类对需要注入的类进行依赖注入配置文件中指定需要扫描的包路径定义一些注解,分别表示访问控制器,业务控制层,数据持久层,依赖注入注解,获取配置文件注解从配置文件中获取需要扫描的包路径,获取到当前路径下的文件信息及文件夹信息,我们将当前路径下所有的以.class结尾的文件添加到一个Set集合中进行存储遍历这个Set集合,获取在类上有指定注解的类,并将其交给IOC容器,定义一个

  • 文本分类算法研究与实现

    文本分类算法研究与实现总结了文本分类中的常用算法,包括8种传统算法:k临近、决策树、多层感知器、朴素贝叶斯(包括伯努利贝叶斯、高斯贝叶斯和多项式贝叶斯)、逻辑回归和支持向量机概念及其实现代码

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号