Observable.forkJoin 使用 for 循环
Observable.forkJoin with a for loop
我正在尝试在名为 processes
的组件中填充数组,该数组是 process
的数组。每个 process
也有一个列表 tasks
.
所以目前,我正在处理两个 api 调用,它们是:
/processes
和
/process/{processId}/tasks
我使用 /processes
获取所有进程并最初填充 processes
数组。然后我使用每个 process
的进程 ID 调用第二个 API 来获取该进程的任务。
目前,我的代码如下所示:
this.processes.forEach((process, index) => {
myService.getTasks().subscribe((tasks) => {
process.tasks = tasks;
})
})
我知道我可以创建一个可观察对象数组,并使用 Observable.forkJoin()
等待所有这些异步调用完成,但我希望能够为每个调用定义订阅回调函数,因为我需要参考 process
。关于如何解决这个问题有什么想法吗?
应避免使用 for
循环发出多个 HTTP 请求,然后分别订阅所有请求,以免打开许多 Observable
连接。
正如@Juan Mendes 提到的,Observable.forkJoin
将 return 一组任务,这些任务与进程数组中每个进程的索引相匹配。您还可以在任务到达时将任务分配给每个进程,如下所示:
getTasksForEachProcess(): Observable<any> {
let tasksObservables = this.processes.map(process, processIdx) => {
return myService.getTasks(process)
.map(tasks => {
this.processes[processIdx].tasks = tasks; // assign tasks to each process as they arrive
return tasks;
})
.catch((error: any) => {
console.error('Error loading tasks for process: ' + process, 'Error: ', error);
return Observable.of(null); // In case error occurs, we need to return Observable, so the stream can continue
});
});
return Observable.forkJoin(tasksObservables);
};
this.getTasksForEachProcess().subscribe(
tasksArray => {
console.log(tasksArray); // [[Task], [Task], [Task]];
// In case error occurred e.g. for the process at position 1,
// Output will be: [[Task], null, [Task]];
// If you want to assign tasks to each process after all calls are finished:
tasksArray.forEach((tasks, i) => this.processes[i].tasks = tasksArray[i]);
}
);
也请看看这个post:
感谢 Seid Mehmedovic 的出色解释,但看起来代码在地图附近缺少一个圆括号。对我来说,它的工作方式如下:
getTasksForEachProcess(): Observable<any> {
let tasksObservables = this.processes.map((process, processIdx) => {
return myService.getTasks(process)
.map(tasks => {
this.processes[processIdx].tasks = tasks; // assign tasks to each process as they arrive
return tasks;
})
.catch((error: any) => {
console.error('Error loading tasks for process: ' + process, 'Error: ', error);
return Observable.of(null); // In case error occurs, we need to return Observable, so the stream can continue
});
});
return Observable.forkJoin(tasksObservables);
};
this.getTasksForEachProcess().subscribe(
tasksArray => {
console.log(tasksArray); // [[Task], [Task], [Task]];
// In case error occurred e.g. for the process at position 1,
// Output will be: [[Task], null, [Task]];
// If you want to assign tasks to each process after all calls are finished:
tasksArray.forEach((tasks, i) => this.processes[i].tasks = tasksArray[i]);
}
);
我正在尝试在名为 processes
的组件中填充数组,该数组是 process
的数组。每个 process
也有一个列表 tasks
.
所以目前,我正在处理两个 api 调用,它们是:
/processes
和
/process/{processId}/tasks
我使用 /processes
获取所有进程并最初填充 processes
数组。然后我使用每个 process
的进程 ID 调用第二个 API 来获取该进程的任务。
目前,我的代码如下所示:
this.processes.forEach((process, index) => {
myService.getTasks().subscribe((tasks) => {
process.tasks = tasks;
})
})
我知道我可以创建一个可观察对象数组,并使用 Observable.forkJoin()
等待所有这些异步调用完成,但我希望能够为每个调用定义订阅回调函数,因为我需要参考 process
。关于如何解决这个问题有什么想法吗?
应避免使用 for
循环发出多个 HTTP 请求,然后分别订阅所有请求,以免打开许多 Observable
连接。
正如@Juan Mendes 提到的,Observable.forkJoin
将 return 一组任务,这些任务与进程数组中每个进程的索引相匹配。您还可以在任务到达时将任务分配给每个进程,如下所示:
getTasksForEachProcess(): Observable<any> {
let tasksObservables = this.processes.map(process, processIdx) => {
return myService.getTasks(process)
.map(tasks => {
this.processes[processIdx].tasks = tasks; // assign tasks to each process as they arrive
return tasks;
})
.catch((error: any) => {
console.error('Error loading tasks for process: ' + process, 'Error: ', error);
return Observable.of(null); // In case error occurs, we need to return Observable, so the stream can continue
});
});
return Observable.forkJoin(tasksObservables);
};
this.getTasksForEachProcess().subscribe(
tasksArray => {
console.log(tasksArray); // [[Task], [Task], [Task]];
// In case error occurred e.g. for the process at position 1,
// Output will be: [[Task], null, [Task]];
// If you want to assign tasks to each process after all calls are finished:
tasksArray.forEach((tasks, i) => this.processes[i].tasks = tasksArray[i]);
}
);
也请看看这个post:
感谢 Seid Mehmedovic 的出色解释,但看起来代码在地图附近缺少一个圆括号。对我来说,它的工作方式如下:
getTasksForEachProcess(): Observable<any> {
let tasksObservables = this.processes.map((process, processIdx) => {
return myService.getTasks(process)
.map(tasks => {
this.processes[processIdx].tasks = tasks; // assign tasks to each process as they arrive
return tasks;
})
.catch((error: any) => {
console.error('Error loading tasks for process: ' + process, 'Error: ', error);
return Observable.of(null); // In case error occurs, we need to return Observable, so the stream can continue
});
});
return Observable.forkJoin(tasksObservables);
};
this.getTasksForEachProcess().subscribe(
tasksArray => {
console.log(tasksArray); // [[Task], [Task], [Task]];
// In case error occurred e.g. for the process at position 1,
// Output will be: [[Task], null, [Task]];
// If you want to assign tasks to each process after all calls are finished:
tasksArray.forEach((tasks, i) => this.processes[i].tasks = tasksArray[i]);
}
);