Angular 5 RxJs concatMap、switchMap、mergeMap 哪个?

本文介绍了Angular 5 RxJs concatMap、switchMap、mergeMap 哪个?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个方法通过localstorage获取token，如果token不存在或过期，我会调用API来获取另一个token并存储到localstorage.

I have this method to get token via localstorage, if token is not exist or is expired, I will call API to get another token and store to localstorage.

在这种情况下，我应该使用哪个地图，目前使用的是 mergeMap，还是其他方式来做到这一点?

In this case, which map should I use, currently using mergeMap, or other way to do this?

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

version: Angular 5, rxjs5

提前致谢.

推荐答案

如果您只提出一个请求，那么使用哪个地图都没有关系.

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

mergeMap (also called flatMap), concatMap , exhaustMap or switchMap will behave the same.

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

These operators behave differently when you emit more than 1 value:

switchMap

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

will apply the mapping to the latest input received:

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

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

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

concatMap

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

will finish the mapping before taking another input:

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

合并地图

就像 concatMap，但它不等待映射完成.但结果可能会重叠:

is like concatMap, but it doesn't wait for mapping to complete. The results can overlap though:

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，它优先输出:

is like a reversed switchMap, it gives priority to the output:

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-------

大理石图:

http://rxmarbles.com/#mergeMap

我将您的代码的简化移到底部，以使一般信息一目了然.

Edit : I moved the simplification of your code to the bottom to make the general information visible at first sight.

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
          );
      })
    )
};

这篇关于Angular 5 RxJs concatMap、switchMap、mergeMap 哪个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！