时间戳

首页 > 解决方案 > 带有forkJoin的RxJs Angular 7 HttpClient多个POST删除第二个订阅？

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

问题描述

我正在创建一个带有链接子任务对象的工作项对象。我的函数 (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;
        });
      }
    });
  }

标签： angularloopsrxjsobservable

解决方案

在您的情况下，孩子不是 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;
});

}

推荐阅读