具有for循環的Observable.forkJoin

Question

我正在嘗試在我的組件中填充一個名為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數組，並使用Observable.forkJoin()等待所有這些異步調用完成但我希望能夠為每個調用定義subscribe回調函數，因為我需要一個引用這個process 。 關於如何處理這個問題的任何想法？

Answer 1

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

另請看這篇文章： 發送多個異步HTTP GET請求

Answer 2

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