Angular 5 RxJs concatMap、switchMap、mergeMap 哪个?

2024-01-17

我有这个方法通过本地存储获取令牌,如果令牌不存在或过期,我将调用API来获取另一个令牌并存储到本地存储。

在这种情况下,我应该使用哪个地图,当前使用 mergeMap,还是其他方式来执行此操作?

public doGetToken():Observable<Token> {
    return this.loadToken().pipe( //get via localstorage
      map(token=>{
        let valid = this.validateTokenIsValid(token);
        let data = {
          token: token,
          valid: valid
        };
        return data;
      }),
      mergeMap(data=>{
        if (!data.valid) {
          return this.doApiGetToken(data.token).pipe(
            map(
              token=>{
                this.saveToken(token); //save to localstorage
                return token;
              }
            )
          );
        } else {
          return of(data.token);
        }
      })
    );

版本:Angular 5、rxjs5

先感谢您。


If you 只提出一个请求, then 没关系您使用哪张地图。

mergeMap(也称为 flatMap)、concatMap、exhaustMap 或 switchMap 的行为相同。

当您发出超过 1 个值时,这些运算符的行为有所不同:

切换映射

会将映射应用于收到的最新输入:

Src : -----A----B----C--D-E-------

switchMap (x => x--x) // emit x twice when received

Out:  ------A--A-B--B-C-D-E--E----

连续映射

将在接受另一个输入之前完成映射:

Src : -----A----B----C--D-E-----------

concatMap (x => x--x) // emit x twice when received

Out:  ------A--A-B--B-C--C--D--D-E--E

mergeMap

类似于 concatMap,但它不等待映射完成。但结果可能会重叠:

Src : -----A----B----C-D---E-----------

mergeMap (x => x--x) // emit x twice when received

Out:  ------A--A-B--B-C-D-C-D-E--E-----

排气图

就像一个反向的 switchMap,它优先输出:

Src : -----A--------B----C-D---E-----------

exhaustMap (x => x--x--x) // emit x thrice when received

Out:  ------A--A--A--B--B--B-D--D--D-------

了解更多信息 :

https://medium.com/@vdsabev/the-simple-difference- Between-rxjs-switchmap-and-mergemap-397c311552a5 https://medium.com/@vdsabev/the-simple-difference-between-rxjs-switchmap-and-mergemap-397c311552a5

大理石图:

http://rxmarbles.com/#mergeMap http://rxmarbles.com/#mergeMap

编辑:我将代码的简化移至底部,以使一般信息一目了然。

public doGetToken(): Observable<Token> {
  return this.loadToken()
    .pipe( //get via localstorage
      mergeMap(token => {
        if(!this.validateTokenIsValid(token))
          return of(token)
        return this.doApiGetToken(token)
          .pipe(
            tap( token => this.saveToken(token)) //save to localstorage
          );
      })
    )
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 5 RxJs concatMap、switchMap、mergeMap 哪个? 的相关文章

随机推荐