如何在GET请求中传递两个主题/动作流作为HTTP参数，以使用RxJS返回Angular中的单个对象/对象数组

Question

目标：我想通过使用RxJS将用户输入作为HTTP参数传入，从我的后端服务中获取单个对象和/或一系列对象。例如，我使用声明性RxJS，因此当用户点击Submit时，我有两个Subject(Action stream)来获取用户的输入。我想将这些Subject值(作为HTTP参数)传递到我的HTTP请求中，以便获得指定的间隔对象或一系列间隔。第一个主题/UserInput将始终是强制性的，而第二个主题/User输入将是可选的。因此，如果有人在第一次输入时输入4，然后在第二次输入时不输入。后端将接受4和"null"这两个输入，因为没有输入任何内容。如果是这种情况，请返回间隔编号为4的间隔。如果存在类似6的第二个输入，则返回从4->6，如果它们存在的话。

问题：如何使用声明性RxJS将这两个主题作为http参数传递？

以下是我的两个主题及其方法，以及我在bay-service.ts文件中对HTTP请求的尝试。

private bayStartSelectedSubject = new Subject<number>();
baySelectedAction$ = this.bayStartSelectedSubject.asObservable();
private bayEndSelectedSubject = new Subject<number>();
bayEndSelectedAction$ = this.bayEndSelectedSubject.asObservable();
selectedBayChanged(selectedBayStartNumber: number, selectedBayEndNumber?: number): void {
this.bayStartSelectedSubject.next(selectedBayStartNumber);
this.bayEndSelectedSubject.next(selectedBayEndNumber);
}
private HandlingUnitResponseUrlSecondary = 'http://localhost:8080/sbtemplate/readBayInventory';

bayOrBays$ = combineLatest([
this.baySelectedAction$,
this.bayEndSelectedAction$
])
.pipe(
map(([bayStart, bayEnd]) => {
mergeMap(() => this.http.get<HuResponse>(`${this.HandlingUnitResponseUrlSecondary}/COS/${bayStart}/${bayEnd}`))
})
);

这里是我在bay-page.ts文件中获取用户输入的地方，并调用他们的方法来发出用户输入值：

onSubmit() {
this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value, this.bayForm.get('bayEnd').value);
if(!this.invalidBay) {
this.bayDoesNotExistError = true;
this.selectedBay = this.bayForm.get('bayStart').value;
this.vibration.vibrate(500);
console.log('Vibrating for 3 second...')
} else {
this.navCtrl.navigateForward([`/results/`]);
}

我知道代码看起来不太好，但我找不到任何关于这方面的信息。谢谢你的帮助！

还有下面是我试图访问的后端API：

@RequestMapping(value="/readBayInventory/{centerId}/{beginBayId}/{endBayId}", method = GET)
public ResponseEntity<HUResponse> readBayInventory(@PathVariable String centerId, @PathVariable int beginBayId, @PathVariable(required = false) int endBayId) {

Answer 1

您可以尝试更改声明bayOrBays的方式，并转移到此表单

const bayOrBays$ = combineLatest([
baySelectedAction$,
bayEndSelectedAction$
]).pipe(
concatMap(([bayStart, bayEnd]) => this.http.get<HuResponse>(`${this.HandlingUnitResponseUrlSecondary}/COS/${bayStart}/${bayEnd}`))
);

这段代码基本上意味着，每当2个Subject中的一个发出新值时，您将触发http调用并返回其结果。CCD_ 4是所谓的"；高级操作员"；，即，是一个运算符，它取一个返回Observable的函数并返回该Observable发出的值(换句话说，它"压平"了作为输入传递的函数返回的内部Observable)。

其他"；高级操作员"；分别是mergeMap(又称flatMap)、switchMap和exahustMap。所有的行为略有不同，但对于http调用，concatMap通常是安全的默认值。关于如何在常见的http相关用例中使用rxJs，您可能会从本文中获得一些灵感。

最后，当前之所以将Observable<void>作为bayOrBays$的类型，部分原因与传递给mergeMap的函数不返回任何内容有关。请记住，如果使用大括号来定义函数体，则必须显式使用return语句来返回某些内容。相反，如果对正文使用单行格式(即不使用大括号)，则函数将返回执行该单行的结果。

所以，这种格式(你使用的)不会返回任何

const myFunction = () => {
doStuff();
}

而这两种格式都返回doStuff()返回的

const myFunction = () => {
return doStuff();
}
const myFunction = () => doStuff()