RxJS Observable - 在使用下一個發射值之前等待異步方法完成

Question

我正在對 observalbe 發出的每個值應用異步方法。 我希望僅在異步方法為前一個值完成后才將此異步方法應用於下一個發出的值。

這是一個簡短的例子：

import { of } from "rxjs";

const timeout = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
};

of(1, 2, 3).subscribe(async (val) => {
  console.log(`starting to use ${val}`);
  await timeout(1000);
  console.log(`done using  ${val}`);
});

timeout 正在更新我的 state 並從服務器獲取數據
Output：

// starting to use 1
// starting to use 2
// starting to use 3
(wait 1 sec)
// done using 1
// done using 2
// done using 3

我會撒謊得到的是：

// starting to use 1
(wait 1 sec)
// done using 1
// starting to use 2
(wait 1 sec)
// done using 2
// starting to use 3
(wait 1 sec)
// done using 3

Answer 1

您可以簡單地使用concatMap ：

of(1, 2, 3).pipe(
   concatMap(val => timeout(1000))
);

concatMap將接收 3 個發出的值，並一次對它們“工作”，等待每個 promise 的結果，然后再繼續下一個。

這是一個有效的StackBlitz演示。

Answer 2

在超時調用之前添加await ，如下所示： await timeout(1000)這至少會將您的代碼以正確的順序放入async ()=>{}中。 然而，function 在 observable 中發生新事件時啟動。 這使您可以在開頭看到三個啟動日志。

如果您希望您的 observable 每秒發出一個值，您可以考慮使用interval或一些去抖動機制而不是of()

Answer 3

您可以使用from將 promise 轉換為 Observable。 這樣你就可以完全控制你的 observables，並且你可以使用 rxjs 提供的所有好東西（所有其他方法和運算符，如 pipe、switchMap 等）。

import { of, from } from 'rxjs';

of(1, 2, 3)
    .pipe(
        switchMap((val) => {
            console.log(`starting to use ${val}`);
            return from(timeout(1000))
        })
    )
    .subscribe(finalValue => {
        console.log(`done using  ${val}`);
    })

來自文檔（沒有雙關語）：

從一個數組創建一個 Observable，一個類似數組的 object，一個 Promise，一個可迭代的 object，或者一個類似 Observable 的 objectA8CFDE891111