Question

我是Observable的新手，所以我相信必须有一种方法可以绕过我的每个循环。

this.pages.forEach(page => {
  page.tasks = [];
  page.image = this.getImageData(this.proof.proofGuid, page.pageGuid);
  page.tasks = this.getPageTasks(this.order.orderNum);
});

两个函数都从我的服务订阅了一个observable，但由于它们是异步的，因此每个循环都会在数据返回并放到对象之前完成。

getImageData(proofGuid, pageGuid) {
  this.proofService.getProofImage(proofGuid, pageGuid)
    .subscribe(image => {
      return image;
    });
}

getPageTasks(orderNum) {
  this.taskService.getTasksByOrderIdForProof(orderNum)
    .subscribe(data => {
      if (data) {
        return data;
      }
    });
}

现在我没有任何其他选择，只能循环获取每个页面的数据。我相信必须有一种基本上强制订阅完成的方法，然后再转到下一页中的每一页。

Answer 1

您对observable的使用/对异步执行的理解需要一些清理。

首先：

getImageData(proofGuid, pageGuid) {
this.proofService.getProofImage(proofGuid, pageGuid)
  .subscribe(image => {
    return image;
  });
}

getPageTasks(orderNum) {
this.taskService.getTasksByOrderIdForProof(orderNum)
  .subscribe(data => {
    if (data) {
      return data;
    }
  });
 }

没有意义。你实际上并没有返回任何东西。这些函数将在调用时执行，然后返回值youu＆＃34;返回＆＃34;将被抛弃。因为订阅功能不返回。它的接口将它定义为返回void，因此在其中调用return是没用的。相反，您应该返回流本身，并在您想要值的地方调用subscribe：

getImageData(proofGuid, pageGuid) {
  return this.proofService.getProofImage(proofGuid, pageGuid);
}

getPageTasks(orderNum) {
  return this.taskService.getTasksByOrderIdForProof(orderNum);
}

好多了。现在执行。

this.pages.forEach(page => {
  page.tasks = [];
  page.image = this.getImageData(this.proof.proofGuid, page.pageGuid);
  page.tasks = this.getPageTasks(this.order.orderNum);
});

这已经没有意义了。它更准确地说是：

this.pages.forEach(page => {
  page.tasks = [];
  this.getImageData(this.proof.proofGuid, page.pageGuid).subscribe(image => page.image = image);
  this.getPageTasks(this.order.orderNum).subscribe(tasks => page.tasks = tasks);
});

此时它实际上可能正常工作。但你是对的，你可以把observable和所有这些结合起来，你可以做到：

this.pages.forEach(page => {
  page.tasks = [];
  Observable.forkJoin(this.getImageData(this.proof.proofGuid, page.pageGuid), 
      this.getPageTasks(this.order.orderNum))
      .subscribe(([image, tasks]) => {
          page.image = image;
          page.tasks = tasks;
      });
});

forkJoin运算符将并行执行异步调用，并在两者完成时以匹配数组的形式给出结果。

你可以获得更多的创造力/效率，只执行一次任务调用，因为看起来输入参数永远不会改变，你可以将所有图像调用组合成一个并行流。

重要的是要记住，可观察量只是您如何处理数据流的定义，并且在您订阅之前实际上并没有做任何事情。所以你可以做这样的事情：

getFullPages(orderNum, pages) {
  // define simple stream to retrieve tasks
  let tasks$ = this.getPageTasks(orderNum); 

  // map pages array into an array of streams to fetch image and add image to page and return the page w the image and join them all
  let pageImages$ = Observable.forkJoin(
                       pages.map(page => // be careful, this is the array map operator
                            this.getImageData(this.proof.proofGuid, page.pageGuid)
                                .map(image => { // this is the rx map operator
                                    page.image = image;
                                    return page; 
                                })));

  // define stream to join tasks and pages into one stream and merge
  let combined$ = Observable.forkJoin(tasks$, pageImages$, 
                           (tasks, pageImages) => pageImages.map(page => { //array map operator
                              page.tasks = tasks;
                              return page;
                           }));
  return combined$; // return to caller
}

// execute and log full pages array
this.getFullPages(this.order.orderNum, this.pages)
    .subscribe(fullPages => console.log(fullPages));

请注意，直到你调用subscribe，没有任何内容执行，因为你只是定义处理和组合数据流的方法，然后一旦你订阅，一切都会立即执行，你得到最终的结果＆全部完成后的全部内容。

你可能想知道，该死的，更多的代码和方式更复杂，为什么这样做？原因是1.执行效率更高，2。此流定义完全可重用。如果我需要再次调用它，我可以调用该函数并订阅该流定义，并且完全定义的pages数组将仅通过该单个调用返回给您。在这种情况下，这对您来说可能并不重要，但通常情况下，它非常有用。

获取每个循环的可观察数据

1 个答案: