angular - RxJs Angular 7 HttpClient 多个 POST 与 forkJoin 删除第二个订阅？

Question

我正在创建一个带有链接子任务对象的工作项对象。我的函数 (createWorkItemAndChildren) 采用两个参数，workItem 和一组 Task 对象。我希望我的函数返回一个包含所有已创建 ID(工作项和任务)的数组。

我必须先从一个 http POST 调用 (workItemService.createWorkItem) 获得父 ID，然后才能创建在同一服务上使用另一个 http POST 方法的子任务。

我现在在 createChildWorkItems 中使用 forkJoin 一次返回所有子 ID。

我如何重构它以便只有一个订阅，并返回包含父 ID 和子 ID 的数组？

  createChildWorkItems(parentId, tasks: Task[]): Observable<any> {
    return <Observable<number>> forkJoin(
      tasks.map(task => <Observable<number>> this.workItemService.createChildWorkItem(parentId, task))
    ).pipe(zip());

  }

  createWorkItemAndChildren(workItem, childTasksToSave: Task[]){
    var resultArray = [];
    this.workItemService.createWorkItem(workItem).subscribe(workItemId => {
      var parentId = workItemId;
      resultArray.push(parentId);
      if (parentId !== null){
        this.createChildWorkItems(parentId, childTasksToSave).subscribe((results: number) => {
          resultArray.push(results);
          this.tfsIdsCreated = resultArray;
        });
      }
    });
  }

Answer 1

在您的情况下， child 不适合 fork join。但在这里你应该使用 Async/await。 fork join 以异步方式发送请求，但是当您收到响应时，Async/await 将等待每个请求的响应，将该响应附加到父级简单，在 Async/await 中，请求将像循环一样顺序排列。当所有请求完成后，返回该对象这是 asyn/await https://lavrton.com/javascript-loops-how-to-handle-async-await-6252dd3c795/ 的链接

  createWorkItemAndChildTasks(workitem, childTasksToSave: Task[]): any {
    this.workItemService.createWorkItem(workitem).subscribe(workItemId => {
     var parentId = workItemId;
      if (parentId !== null ){
        this.tfsIdsCreated.push(parentId);

    // now create the children on the workItemForm.
    for (let child of childTasksToSave){
//use here Async await when you get response attach to parent 

     this.workItemService.createChildWorkItem(parentId, child).subscribe(task =>{
        if (task !== null){
          console.log(' createWorkItem received child taskid: ' + task);
          this.tfsIdsCreated.push(task);
        }
      });
    }
  }
  return this.tfsIdsCreated;
});