angular - 为每个循环获取 Observable 数据

Question

我对 Observable 还很陌生，所以我相信一定有一种方法可以绕过我的 for each 循环。

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

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

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

您对可观察对象的使用/对异步执行的理解需要一些清理。

首先是这个:

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

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

没有意义。您实际上并没有返回任何东西。这些函数将在调用时执行，然后您“返回”的值将被丢弃。因为订阅函数没有返回。它的接口(interface)定义为返回void，所以在它里面调用return是没有用的。相反，您应该返回流本身并在需要值的地方调用订阅:

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

请注意，在您调用订阅之前，不会执行任何操作，因为您只是在定义处理和组合数据流的方法，然后一旦您订阅，所有内容都会立即执行，并且您会得到完整的最终结果都完成了。

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