一 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);
});
} }

合并是没有顺序的:先到达的值在合并后的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();
}
}
);
} }

二 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.');
}
);
} }

处理并行的多个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);
}
);
}
}

三 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环境 )的更多相关文章

  1. RxJS之工具操作符 ( Angular环境 )

    一 delay操作符 源Observable延迟指定时间,再开始发射值. import { Component, OnInit } from '@angular/core'; import { of ...

  2. RxJS之转化操作符 ( Angular环境 )

    一 map操作符 类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果. import { Compo ...

  3. RxJS之过滤操作符 ( Angular环境 )

    一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observa ...

  4. RxJS之Subject主题 ( Angular环境 )

    一 Subject主题 Subject是Observable的子类.- Subject是多播的,允许将值多播给多个观察者.普通的 Observable 是单播的. 在 Subject 的内部,subs ...

  5. dtGrid插件集成到Angular环境实现表格化数据展现

    00没有抱怨的世界 周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333. AngularJS用的时间很短,高级的用法有点吃不消了,$diges ...

  6. RxJava系列5(组合操作符)

    RxJava系列1(简介) RxJava系列2(基本概念及使用介绍) RxJava系列3(转换操作符) RxJava系列4(过滤操作符) RxJava系列5(组合操作符) RxJava系列6(从微观角 ...

  7. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  8. Rxjs之创建操作符(Angular环境)

    一 of操作符 import { Component, OnInit } from '@angular/core'; import { of } from 'rxjs/observable/of'; ...

  9. Angular环境准备和Angular cli

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

随机推荐

  1. 一个比较常用的关于php下的mysql数据操作类

    <?php /************************************************************* MySql类封装: 首先连接数据库,需要有参数 参数如何 ...

  2. Zend Framework 入门(1)—快速上手

    1. 安装 从 Zend Framework 的网页上下载最新版本.解压后,把整个目录拷贝到一个理想的地方,比如:/php/library/Zend. 打开 php.ini 文件,确认包含 Zend ...

  3. supervisor python开发的进程管理工具

    Supervisor (http://supervisord.org) 是一个用 Python 写的进程管理工具,可以很方便的用来启动.重启.关闭进程(不仅仅是 Python 进程).除了对单个进程的 ...

  4. 马士兵hadoop第三课:java开发hdfs

    马士兵hadoop第一课:虚拟机搭建和安装hadoop及启动 马士兵hadoop第二课:hdfs集群集中管理和hadoop文件操作 马士兵hadoop第三课:java开发hdfs 马士兵hadoop第 ...

  5. The Dominator of Strings HDU - 6208(ac自动机板题)

    题意: 就是求是否有一个串 是其它所有串的母串 解析: 把所有的串都加入到trie数中  然后用最长的串去匹配就好了 emm..开始理解错题意了...看成了只要存在一个串是另一个的母串就好.. 然后输 ...

  6. 管道和xargs区别

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现“将前面的标准输出作为后面的 ...

  7. 我们一起学习WCF 第八篇回调函数

    什么是回调函数? 一个简单的例子:小明想要在京东购买一件商品.他会登陆网站选好自己的商品.然后他把这件商品放在购物车,然后开始付钱(这个表示触发,不付钱不发货(排除货到付款)).然后京东的人员收到了小 ...

  8. 从docker到docker-compose部署一个nginx+flask+mysql+redis应用

    目的是把一个flask项目的mysql数据库.redis数据库.flask应用.nginx服务分别装到四个容器中,然后用docker-compose命令同时启动与关闭 一.安装docker Docke ...

  9. ARP数据包伪造

      一台网络中的计算机,其传递到网络中的数据包的内容是完全由其软硬件逻辑决定的,软件可以操控硬件,硬件亦是一种特殊的软件,所以,接收者只根据数据包的内容,绝不可能判定此数据包的真正来源,一切都是可以伪 ...

  10. PIE SDK彩色标准化融合

    1.算法功能简介 色彩标准化融合对彩色图像和高分辨率图像进行数学合成,从而使图像得到锐化.色彩归一化变换也被称为能量分离变换( Energy Subdivision Transform),它使用来自融 ...