一 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. RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap

    RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...

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

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

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

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

  8. angular环境搭建时的坑

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

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

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

随机推荐

  1. arguments.callee 和 caller

    arguments arguments它是一个类数组对象,包含着传入函数中的所有参数.虽然 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,该属性是一个指 ...

  2. elk-Logstash

    ELK是三个工具的集合,Elasticsearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构,很多公司利用它来搭建可视化的海量日志分析平台. 2. Logs ...

  3. React Native,flexbox布局

    Flexbox布局 flex:使组件在可利用的空间内动态地扩张或收缩.flex:1会使组件撑满空间.当有多个组件都指定了flex的值,那么谁的flex值大谁占得空间就大,占得大小的比例就是flex值的 ...

  4. 经典论文翻译导读之《Google File System》(转)

    [译者预读] GFS这三个字母无需过多修饰,<Google File System>的论文也早有译版.但是这不妨碍我们加点批注.重温经典,并结合上篇Haystack的文章,将GFS.TFS ...

  5. Firebird日期时间操作

    最近在使用Firebird数据做 一项目,使用FireBird边用边学.(以下转贴) 查询2007年度以后的,12月份以上的数据记录,datetime为timestamp字段 select * fro ...

  6. Linux基本命令(新手入门使用)

    Linux常用基本命令主要包括目录操作命令.文件操作命令.文件查看命令.磁盘管理命令.用户管理命令.系统管理命令等. 目录操作命令:cd.ls.mkdir.pwd.rmdir 文件操作命令:cp.mv ...

  7. 何谓domReady

    我的博客已经写过好几篇如何实现domReady的文章,最近做培训,面向新手们,需要彻彻底底向他们说明这个东西,于是就有了这篇文章. 我们经常看人们用 document.getElementById(& ...

  8. Android 设备,如何root,执行adb shell,查看设备中的数据库信息等【转】

    原文地址: Android 设备,如何root,执行adb shell,查看设备中的数据库信息等

  9. GitHub中国区前100名到底是什么样的人?向大佬们学习。

    本文转自:码迷 http://www.mamicode.com/info-detail-1267434.html 本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排 ...

  10. Win2012 R2虚拟机自激活(AVMA)技术

    只要你的宿主机是Windows Server 2012 R2 Datacenter且宿主机已经激活, 不管宿主机许可证是VL,OEM还是零售版,只要宿主主机处于激活状,在其上运行的任何R2 VM都将被 ...