Angular - 使用 RxJS 使用 foreach 多次调用 http
Angular - Multiples calls http with foreach using RxJS
这是我第一次在 Angular 项目中使用 RxJS。我有足够的疑问,需要一些帮助。
这是我的原始代码
loadOperations() {
this.operationsListData = [];
this.operationsList = [];
this.operationsService.getOperations(this.selectedVariable).subscribe(data => {
this.operationsData = data;
if (data.length != 0) {
const variablesOperations = this.operationsData.map(p => p.variable_operations);
var arr = Object.getOwnPropertyNames(variablesOperations[0]);
arr.forEach(clave => {
var name = variablesOperations[0][clave];
this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).subscribe(
data => {
data.name = variablesOperations[0][clave];
this.operationsListData.push(data);
},
);
});
}
});
}
getOperationsByUuid(operation: string, uuid: string): Observable<OperationList> {
...
return this.http.get<OperationList>(url);
}
getOperations(selectedVariables: any): Observable<Operations[]> {
....
return this.http.get<Operations[]>(url);
}
现在我已经使用了RxJS。这就是我现在所拥有的。但是,它没有得到我需要的。问题是 concatMap。在我的原始代码中,我有一个遍历数组并调用服务的 foreach。但是,我不知道如何在 RxJS 中制作那段代码或将什么放入 return.
var variablesOperations;
const combined = this.operationsService.getOperationsByUuid(this.selectedVariable).pipe(
switchMap(data => {
this.operationsData = data;
if (data.length != 0) {
variablesOperations = data.map(p => p.variable_operations);
var arr = Object.getOwnPropertyNames(variablesOperations[0]);
console.log(arr);
return of(arr)
}
}),
//This is wrong and it is what I need help with
concatMap((arrayClaves) => {
arrayClaves.forEach( clave => {
this.operationsListService.getOperationsByUuid(variablesOperations[0][clave], clave)
})
return null;
})
)
combined.subscribe(
data => {
console.log(data);
},
err => {
console.log(err);
}
);
总而言之,我需要知道如何使用 RxJS 执行原始代码的 foreach。谁能帮帮我?
如果你只是想在你的管道中调用或做一些事情,你可以使用 tap()。
例如:
myObservable.pipe(
tap(myValue => {
console.log(myValue);
}
);
试试这个:
this.operationsService.getOperations(this.selectedVariable).pipe(
tap(data => this.operationsData = data),
filter(data => data.length != 0),
map(data => data.map(p => p.variable_operations)),
switchMap(variablesOperations => {
return forkJoin(Object.getOwnPropertyNames(variablesOperations[0]).map(clave => {
return this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).pipe(
map(data => ({ ... data, name: variablesOperations[0][clave] })),
);
}));
}),
).subscribe(operationsListData => this.operationsListData = operationsListData);
这是我第一次在 Angular 项目中使用 RxJS。我有足够的疑问,需要一些帮助。
这是我的原始代码
loadOperations() {
this.operationsListData = [];
this.operationsList = [];
this.operationsService.getOperations(this.selectedVariable).subscribe(data => {
this.operationsData = data;
if (data.length != 0) {
const variablesOperations = this.operationsData.map(p => p.variable_operations);
var arr = Object.getOwnPropertyNames(variablesOperations[0]);
arr.forEach(clave => {
var name = variablesOperations[0][clave];
this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).subscribe(
data => {
data.name = variablesOperations[0][clave];
this.operationsListData.push(data);
},
);
});
}
});
}
getOperationsByUuid(operation: string, uuid: string): Observable<OperationList> {
...
return this.http.get<OperationList>(url);
}
getOperations(selectedVariables: any): Observable<Operations[]> {
....
return this.http.get<Operations[]>(url);
}
现在我已经使用了RxJS。这就是我现在所拥有的。但是,它没有得到我需要的。问题是 concatMap。在我的原始代码中,我有一个遍历数组并调用服务的 foreach。但是,我不知道如何在 RxJS 中制作那段代码或将什么放入 return.
var variablesOperations;
const combined = this.operationsService.getOperationsByUuid(this.selectedVariable).pipe(
switchMap(data => {
this.operationsData = data;
if (data.length != 0) {
variablesOperations = data.map(p => p.variable_operations);
var arr = Object.getOwnPropertyNames(variablesOperations[0]);
console.log(arr);
return of(arr)
}
}),
//This is wrong and it is what I need help with
concatMap((arrayClaves) => {
arrayClaves.forEach( clave => {
this.operationsListService.getOperationsByUuid(variablesOperations[0][clave], clave)
})
return null;
})
)
combined.subscribe(
data => {
console.log(data);
},
err => {
console.log(err);
}
);
总而言之,我需要知道如何使用 RxJS 执行原始代码的 foreach。谁能帮帮我?
如果你只是想在你的管道中调用或做一些事情,你可以使用 tap()。
例如:
myObservable.pipe(
tap(myValue => {
console.log(myValue);
}
);
试试这个:
this.operationsService.getOperations(this.selectedVariable).pipe(
tap(data => this.operationsData = data),
filter(data => data.length != 0),
map(data => data.map(p => p.variable_operations)),
switchMap(variablesOperations => {
return forkJoin(Object.getOwnPropertyNames(variablesOperations[0]).map(clave => {
return this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).pipe(
map(data => ({ ... data, name: variablesOperations[0][clave] })),
);
}));
}),
).subscribe(operationsListData => this.operationsListData = operationsListData);