rx汇总总结

Posted 2020-12-17 y896926473

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操作符可以确保每次接收到的都是最新一次发送的值（即最新的接口回调的值）