RxJS和async-了解執行流程

我真的很想了解與 RxJS 的異步；我寫了這個例子來看看異步函式呼叫是如何在 RxJS observables 中作業的；結果是：
func1 --- 10
func1 --- 20
func1 --- 40
func1 --- 30
switchMap ---1--- -->item: 0
switchMap ---1--- -->item : 1
switchMap ---1--- -->item: 2
switchMap ---1--- -->item: 3
switchMap ---1--- -->item: 4
switchMap ---1- -- -->item: 5
switchMap ---1--- -->item: 6
switchMap ---1--- -->item: 7
END
switchMap ---2--- -->item: 1
switchMap ---3--- -->item: 0.111
switchMap ---3--- -->item: 1.111
switchMap ---3--- -->item: 2.111
switchMap ---3-- - -->專案：3.111
switchMap ---3--- -->item:
4.111 switchMap ---3--- -->item: 5.111
switchMap ---3--- -->item: 6.111
switchMap ---3--- -->item:
7.111 switchMap ---3--- -->item: 8.111
switchMap ---3--- -->item: 9.111
MERGEMAP: item-->1000
MERGEMAP: item-->2000
NEXT - -> 1000
NEXT --> 2000
MERGEMAP: item-->3000
MERGEMAP: item-->4000
NEXT --> 3000
NEXT --> 4000
MERGEMAP: item-->5000
NEXT --> 5000
COMPLETE
我不明白為什么 func1 --- 40 出現在 func1 --- 30 之前，以及為什么END列印在 switchMap ---1--- 和 switchMap ---2--- 的中間
。

import { bufferCount, from, mergeMap, Observable, switchMap } from "rxjs";

module async1 {
  async function func1() {
    console.log("func1 --- 10");
    const loop0 = async () => {
      return from([0, 1, 2, 3, 4, 5, 6, 7]);
    };

    const loop1 = async () => {
      return 1;
    };

    const loop2 = async () => {
      const arrayLoop2 = [];
      for (let i = 0; i < 10; i  ) {
        arrayLoop2.push(i   0.111);
      }
      return arrayLoop2;
    };

    const loop3 = async () => {
      const arrayLoop3 = [1000, 2000, 3000, 4000, 5000];
      return from(arrayLoop3);
    };

    let myObservable: Observable<number>;

    console.log("func1 --- 20");
    loop0().then((value) => {
      myObservable = value;
      const myPipeline = myObservable!.pipe(
        switchMap((item) => {
          console.log(`switchMap ---1--- -->item: ${item}`);
          const loop1Result = from(loop1());
          return loop1Result;
        }),
        switchMap((item) => {
          console.log(`switchMap ---2--- -->item: ${item}`);
          const loop2Result = loop2();
          return loop2Result;
        }),
        switchMap((items) => {
          items.forEach((item) => {
            console.log(`switchMap ---3--- -->item: ${item}`);
          });
          const loop3Result = loop3();
          return loop3Result;
        }),
        switchMap((item) => {
          return item;
        }),
        bufferCount(2),
        mergeMap((items) => {
          items.forEach((item) => {
            console.log(`MERGEMAP: item-->${item}`);
          });
          return items;
        }, 3)
      );

      console.log("func1 --- 30");

      const mySubscription = myPipeline.subscribe({
        next: (item) => {
          console.log(`N E X T --> ${item}`);
        },
        error: () => {
          console.log(`E R R O R`);
        },
        complete: () => {
          console.log(`C O M P L E T E`);
          mySubscription.unsubscribe();
        },
      });
    });
    console.log("func1 --- 40");
    return true;
  }

  func1().then((resolve) => {
    console.log("***END***");
  });
}

uj5u.com熱心網友回復：

您無法控制何時執行與 observables 相關的代碼，因此如果您想確保func1()在呼叫 next 之前完成內部的整個邏輯，則function不應在內部使用 observables 和訂閱func1()。您應該使用Promise<Type>combine withawait來代替。然后你可以func1這樣呼叫：

await func1();

如果你想執行函式console.log("func1 --- 40")并且console.log("***END***")在RxJS作業之后，你應該將它們添加到 body 中complete：

        complete: () => {
          console.log("func1 --- 40")
          console.log(`C O M P L E T E`);
          console.log("***END***")
          mySubscription.unsubscribe();
        }

標籤：javascript 打字稿 异步 rxjs

上一篇：為什么mat-form-field沒有出現？

下一篇：如何使函式明確指出它會在JavaScript中引發錯誤？