带for循环的Observable.forkJoin [英] Observable.forkJoin with a for loop

问题描述

我正在尝试在名为processes的组件中填充一个数组，该数组是process的数组.每个process都有一个tasks列表.

I am trying to populate an array in my component called processes which is an array of process. Each process also has a list of tasks.

所以目前，我正在使用两个api调用:

So currently, I am working with two api calls which are:

/processes 和 /process/{processId}/tasks

我使用/processes来获取所有进程，并首先填充processes数组.然后，我使用每个process的进程ID来调用第二个API，以获取该进程的任务.

I use /processes to get all the processes and initially populate the processes array. Then I use the process id of each process to call the second API to get the tasks of that process.

当前，我的代码如下所示:

Currently, my code looks something like this:

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

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

I understand that I can create an array of observables, and use Observable.forkJoin() to wait for all these async calls to finish but I want to be able to define the subscribe callback function for each of the calls since I need a reference to the process. Any ideas on how I can go about approaching this issue?

推荐答案

应避免使用for循环发出多个HTTP请求，然后分别订阅所有这些请求，以便没有很多Observable连接开了.

Using the for loop to make multiple HTTP requests, and then subscribe to all of them separately should be avoided in order not to have many Observable connections opened.

如@Juan Mendes所述，Observable.forkJoin将返回与您的进程数组中每个进程的索引匹配的任务数组.您还可以按如下方式将任务分配给每个进程:

As @Juan Mendes mentioned, Observable.forkJoin will return an array of tasks that match the index of each process in your processes array. You can also assign tasks to each process as they arrive as follows:

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

也请看一下这篇文章:发送多个异步HTTP GET请求

Please also take a look at this post: Send multiple asynchronous HTTP GET requests

这篇关于带for循环的Observable.forkJoin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！