我試圖弄清楚如何使用 RxJs 對傳出的 api 請求批次進行排隊。
我在這個示例 Angular 應用程式上的目標是同時發送 3 個“隨機貓事實”API 請求，并且只有在它們解決后才發送 2 個額外的“隨機活動”請求：
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { forkJoin, concat } from "rxjs";
import { combineAll } from "rxjs/operators";
const RANDOM_CAT_FACTS_API = "https://catfact.ninja/fact";
const RANDOM_ACTIVITY_API = "https://www.boredapi.com/api/activity";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
constructor(private http: HttpClient) {}
fetchSequential() {
const catFactsObservables = [
this.http.get(RANDOM_CAT_FACTS_API),
this.http.get(RANDOM_CAT_FACTS_API),
this.http.get(RANDOM_CAT_FACTS_API)
];
const activitiesObservables = [
this.http.get(RANDOM_ACTIVITY_API),
this.http.get(RANDOM_ACTIVITY_API)
];
const sequencedObservables = [
forkJoin(catFactsObservables),
forkJoin(activitiesObservables)
];
concat(sequencedObservables)
.pipe(combineAll())
.subscribe((p) => console.log({ p }));
}
}
我顯然做錯了，因為目前所有 5 個請求都是同時發送的。
我如何使用 RxJs 以便activitiesObservables僅在catFactsObservables請求得到解決后才發送請求？
此外，有沒有辦法讓subscribe回呼僅在兩個批次都解決后觸發 - 從而包含所有 5 個請求的回應，而不是為每個批次觸發單獨的事件？
沙盒：
https://codesandbox.io/s/mystifying-gauss-cfcj0z?file=/src/app/app.component.ts:700-721
uj5u.com熱心網友回復：
您要做的是使用 concatAll 運算子而不是 combineAll 運算子。
這樣，第二個 observable 不會在第一個之前發出。
您的代碼如下所示：
concat(sequencedObservables)
.pipe(concatAll())
.subscribe((p) => console.log({ p }));
uj5u.com熱心網友回復：
最后，我設法根據@gil 的答案和這個答案使用concatAll和的組合解決了這個問題reduce。
concat(sequencedObservables)
.pipe(
concatAll(),
reduce((acc, res) => {
acc.push(res);
return acc;
}, [])
)
.subscribe((p) => console.log(p));
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/474714.html
標籤：javascript 有角度的 打字稿 http rxjs
上一篇：真正無法下載的影像
下一篇：如何洗掉包括第一行在內的重復行？