javascript - Observable.forkJoin 与 for 循环

标签 javascript angular observable angular2-observables

我正在尝试在名为 processes 的组件中填充一个数组,它是一个 process 数组。每个进程还有一个任务列表。

所以目前,我正在处理两个 api 调用,它们是:

/进程/process/{processId}/tasks

我使用 /processes 获取所有进程并最初填充 processes 数组。然后我使用每个 process 的进程 id 调用第二个 API 来获取该进程的任务。

目前,我的代码看起来像这样:

this.processes.forEach((process, index) => {
    myService.getTasks().subscribe((tasks) => {
        process.tasks = tasks;
    })
})

我知道我可以创建一个 observable 数组,并使用 Observable.forkJoin() 等待所有这些异步调用完成,但我希望能够定义订阅回调函数每个调用,因为我需要对 process 的引用。关于如何解决这个问题有什么想法吗?

最佳答案

应避免使用 for 循环发出多个 HTTP 请求,然后分别订阅所有请求,以免打开许多 Observable 连接。

正如@Juan Mendes 提到的,Observable.forkJoin 将返回一个任务数组,这些任务与进程数组中每个进程的索引相匹配。您还可以在任务到达时将任务分配给每个进程,如下所示:

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]);
    }
);

也请看看这篇文章:Send multiple asynchronous HTTP GET requests

关于javascript - Observable.forkJoin 与 for 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42334469/

相关文章:

java - 对我使用 rxJava 从改造 2 获得的响应进行过滤操作

Javascript 混淆类型和添加空数组和对象的结果

javascript - 如何在表单标签内添加点击事件

html - 背景图像在 IE 中不显示

angular - *ngFor 在某些值 [date] 更改时添加某些 div [date] 元素

angular - 如何在没有嵌入式订阅的情况下一个接一个地执行异步操作

angular - 返回的 BehaviorSubject(作为 Observable)是否受 take(1) 或取消订阅的影响?

javascript - Flex 禁用 Safari 键盘快捷键

javascript - 数组搜索/for 循环

javascript - 如何恢复 GZIP 压缩?