标签：产生 merge component pos 需要 att jsonp promise init
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操作符可以确保每次接收到的都是最新一次发送的值（即最新的接口回调的值）
标签：产生 merge component pos 需要 att jsonp promise init
原文地址：https://www.cnblogs.com/y896926473/p/13282341.html
