在rxJs中与flatMap vs concatMap进行斗争

我正在努力了解rxJsflatMap和之间的concatMap区别。

我能理解的最明确的答案是，concatmap和flatmap之间的差异

所以我自己去尝试了一些事情。

import "./styles.css";
import { switchMap, flatMap, concatMap } from "rxjs/operators";
import { fromFetch } from "rxjs/fetch";
import { Observable } from "rxjs";

function createObs1() {
  return new Observable<number>((subscriber) => {
    setTimeout(() => {
      subscriber.next(1);
      subscriber.complete();
    }, 900);
  });
}

function createObs2() {
  return new Observable<number>((subscriber) => {
    setTimeout(() => {
      subscriber.next(2);
      //subscriber.next(22);
      //subscriber.next(222);
      subscriber.complete();
    }, 800);
  });
}

function createObs3() {
  return new Observable<number>((subscriber) => {
    setTimeout(() => {
      subscriber.next(3);
      //subscriber.next(33);
      //subscriber.next(333);
      subscriber.complete();
    }, 700);
  });
}

function createObs4() {
  return new Observable<number>((subscriber) => {
    setTimeout(() => {
      subscriber.next(4);
      subscriber.complete();
    }, 600);
  });
}

function createObs5() {
  return new Observable<number>((subscriber) => {
    setTimeout(() => {
      subscriber.next(5);
      subscriber.complete();
    }, 500);
  });
}

createObs1()
  .pipe(
    flatMap((resp) => {
      console.log(resp);
      return createObs2();
    }),
    flatMap((resp) => {
      console.log(resp);
      return createObs3();
    }),
    flatMap((resp) => {
      console.log(resp);
      return createObs4();
    }),
    flatMap((resp) => {
      console.log(resp);
      return createObs5();
    })
  )
  .subscribe((resp) => console.log(resp));

console.log("hellooo");

我在这里用过那个操场的例子

问题

1）据我了解，flatMap的使用应混合使用输出，以便控制台日志类似于（1、3、2、4、5）。我已经尝试了30次以上，并且总是排在同一行（1、2、3、4、5）

我在做错什么还是在不懂得做错什么？

2）如果启用，createObs2()然后createObs3()删除注释，并在代码中包含多个发出的事件，那么事情将变得混乱。即使您更改为concatMap，它也会使事情变得混乱，并且结果会混杂在一起。我希望只有一次的多个数字会多次出现。结果可能是（1、2、33、3、2、22、3、33、4、5、4、3、4、5）为什么会发生这种情况？

我如何在操场上测试示例。我只从最后一个console.log（“ hello”）中删除了1个字母。仅观察到一次更改，例如console.log（“ heloo”），然后再次编译项目，并在控制台中输出输出。

编辑：我去flatMap和concatMap的原因是使用http库在angular中找到嵌套订阅的替代方法。

createObs1().subscribe( (resp1) => {
          console.log(resp1);
          createObs2().subscribe( (resp2) => {
               console.log(resp2);
               createObs3().subscribe( (resp3) => {
                   console.log(resp3);
                   createObs4().subscribe( (resp4) => {
                        console.log(resp4);
                        createObs5().subscribe( (resp5) => {
                            console.log(resp5);
                            })
                        })
                   })
               })
             })