1、map
map和javascript中的数组的map方法类似
const getData = (param) => { return of(`return: ${param}`).pipe( delay(Math.random() * 1000) ) }; from([1, 2, 3, 4,5]) .pipe( map(param => getData(param)), ) .subscribe(val => console.log(val));
返回的是6 observable
2、concatAll
javascript中数组也有一个方法叫做concat，concatAll有个flatten效果
from([1, 2, 3, 4, 5]) .pipe( map(param => getData(param)), concatAll() // 比上个例子多出的部分 ) .subscribe(val => console.log(val));
return: 1 return: 2 return: 3 return: 4 return: 5
3、concatMap
map和concatAll直接结合成一个操作符
from([1,2,3,4,5]) .pipe( concatMap(param => getData(param)) ) .subscribe(val => console.log(val));
4、mergeAll
from([1, 2, 3, 4, 5]) .pipe( map( item => getData(item) ), mergeAll() ) .subscribe(v => console.log(v));
随机 也可以实现concatAll的效果，只要 mergeAll(1) 就可以了
5、mergeMap（又叫flatMap）
from([1, 2, 3, 4,5]) .pipe( mergeMap(param => getData(param)) ) .subscribe(val => console.log(val));
6、switchAll
from([1,2,3,4,5]).pipe( map(param => getData(param)), switchAll() ).subscribe(val => console.log(val));
return 5
map之后产生的五个observable, 经过switchAll之后，由于五个observable的delay不同，所以还没来得及发射数据，就被最后的observable给‘踢’掉了
7、switchMap
map之后switchAll也可以合并成一个操作
会在新的 Observable 对象发出新值后 退订前一个未处理完的 Observable 对象
from([1,2,3,4,5]) .pipe( switchMap(param => getData(param)) ) .subscribe(val => console.log(val));
8、forkJoin
forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值
const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1}); const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2}); Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe( res => console.log(res) // [{id: 1}, {id: 2}] );
9、处理两个请求
1、当我们发送下一个请求时，需要依赖于上一个请求的数据。即我们在需要在上一个请求的回调函数中获取相应数据，然后在发起另一个 HTTP 请求
import { Component, OnInit } from ‘@angular/core‘;
import { Http } from ‘@angular/http‘;
import ‘rxjs/add/operator/map‘;
@Component({
selector: ‘app-root‘,
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
apiUrl = ‘https://jsonplaceholder.typicode.com/users‘;
username: string = ‘‘;
user: any;
ngOnInit() {
this.http.get(this.apiUrl)
.map(res => res.json())
.subscribe(users => {
let username = users[6].username;
this.http.get(`${this.apiUrl}?username=${username}`)
.map(res => res.json())
.subscribe(
user => {
this.username = username;
this.user = user;
});
});
}
}
先从 https://jsonplaceholder.typicode.com/users 地址获取所有用户的信息，然后再根据指定用户的 username 进一步获取用户的详细信息
import { Component, OnInit } from ‘@angular/core‘;
import { Http } from ‘@angular/http‘;
import ‘rxjs/add/operator/map‘;
import ‘rxjs/add/operator/mergeMap‘;
@Component({
selector: ‘app-root‘,
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
apiUrl = ‘https://jsonplaceholder.typicode.com/users‘;
username: string = ‘‘;
user: any;
ngOnInit() {
this.http.get(this.apiUrl)
.map(res => res.json())
.mergeMap(users => {
this.username = users[6].username;
return this.http.get(`${this.apiUrl}?username=${this.username}`)
.map(res => res.json())
})
.subscribe(user => this.user = user);
}
}
通过 mergeMap 操作符，解决了嵌套订阅的问题
10、Promise的链式调用 很好解决并行和串行请求,但是Promise本身是无法取消的
https://blog.csdn.net/rj0024/article/details/89207201?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
存在问题：
在单页面应用中，resolve回调里需要进行try/catch处理，特别是在回调里有DOM操作的时候。否则，在接口响应慢的时候进行路由切换会导致控制台报错，甚至导致页面陷入无法交互的境地
由于接口响应慢而导致的竞态条件问题
rxjs是可以取消的，对于Promise出现的两个问题
在切换路由，组件销毁时调用unsubscribe方法取消订阅，回调里的逻辑便不会执行
竞态条件是由于接口异步调用的回调顺序不可控导致的，rxjs的switchMap操作符可以确保每次接收到的都是最新一次发送的值（即最新的接口回调的值）
11、distinct(lambda) distinctUntilChanged([(Prev, current)=>{}]) 和 distinctUntilKeyChanged(key)
过滤掉重复的项
from([1, 2, 2, 3, 2]) .pipe(distinct()) .subscribe(l); // 1,2,3
12、debounce(lambda: Observable) 和 debounceTime(number)
延时发送源发出的值, 如果期间源发出了新值的话，返回的值为最新的值，上一个会被丢弃掉（避免高消费事件时使用）
13、find 和 findIndex
类似 Array.prototype.find()
14、toPromise
把 Observable 转化为 promise
click = async e => { let res = await ajax(‘http://localhost:1995/a‘).pipe(map(res => res.response)).toPromise(); l(res) }
15、buffer bufferCount bufferTime bufferToggle bufferWhen
buffer系列，将过去的值作为数组收集，在事件触发时发出收集好的值
const send$= fromEvent(document, ‘click‘); const interval = interval(1000); const buffered = interval.pipe(buffer(send$)); buffered.subscribe(l);
16、delay delayWhen
延迟来自源Observable的项目的发射
17、endWith
from([1, 2]) .pipe(endWith("源观察完成后，附加一个发射，然后完成。")) .subscribe(l); // 1, 2, "源观察完成后，附加一个发射，然后完成。"
原文：https://www.cnblogs.com/y896926473/p/13282341.html