RXJS concat：確保 pipe 中的邏輯在 observable 完成之前執行

Question

來自： https://www.learnrxjs.io/learn-rxjs/operators/combination/concat

按照之前完成的順序訂閱 observables

您可以將 concat 想象成 ATM 上的一條線，下一個事務（訂閱）在前一個事務完成之前無法開始！

鑒於上述情況，我希望以下示例記錄為 1、'2'、'3'、4。當我運行它時，我得到 1、4、'3'、'2'。 有沒有辦法確保管道邏輯在完成之前已經運行？

import { concat, of } from 'rxjs';
import { map } from 'rxjs/operators';

const o1o2 = of(console.log('1')).pipe(map(x => console.log(2)));
const o3 = () => console.log(3);
const o4 = of(console.log('4'));

concat(o1o2, of(o3()), o4).subscribe();

https://stackblitz.com/edit/rxjs-bqr9pr?file=index.ts

---

編輯：

在上面的 1 和 4 中，當行被執行時立即被觸發（甚至在點擊 concat 之前）。

3 被觸發是因為 (of) 創建了一個熱可觀察對象，其中邏輯發生在可觀察對象返回之前。 實際上與上面類似的場景。 由於 concat 在順序執行之前鏈接了 observables，所以我們看到記錄了 3 個。 Defer 是一種使 observable 變冷的方法。

2 是唯一依賴於訂閱日志的東西。

o4 = of(console.log('wut')).pipe(tap() => console.log(4))
also3 = defer() => {
    console.log(3)
    return of()
}
o3 = defer(() => {
    return of(console.log(3))
})
o2 = of(null).pipe(tap () => console.log(2))
o1 = of(null).pipe(tap () => console.log(1))

concat(o1, o2, o3, o4);

下面的示例將記錄 wut, 1, 2, 3, 4

Answer 1

讓我們逐行看：

---

const o1o2 = of(console.log('1')).pipe(map(x => console.log(2)));

當您在此行調用of時，您會立即評估console.log('1')並將log function 的結果傳遞給of （ log的結果是undefined ）。

這會將'1'記錄到控制台。

---

const o4 = of(console.log('4'));

同樣，您正在立即評估console.log('4')並將 function, undefined的結果作為第一個參數傳遞給of

這會將'4'記錄到控制台。

---

concat(o1o2, of(o3()), o4).subscribe();

在這一行中，您將立即調用o3並將 function 的結果用作of的第一個參數。 當o3調用console.log(3)並返回其結果時，您只需使用undefined調用of() 。

這會將3記錄到控制台。

---

const o1o2 = of(console.log('1')).pipe(map(x => console.log(2)));

現在我們回到這一行，我認為，這是唯一一個表現如您所料的行，因為x => console.log(2)是 function，所以它不會評估console.log直到它被稱為。 我不太了解 RXJS 庫，但是由於您的第二個log調用包含在 function 中，因此concat似乎正在評估它，同時執行concat所做的任何事情。

這會將2記錄到控制台。