Question

我仍在学习rxjs，使用多个订阅时遇到了麻烦。我需要从响应中获取ID才能将照片添加到产品中。

    create(product) {
     this.api.createProduct(product).subscribe(product => {
       product.photos.forEach(photo => {
         photo.productId = product.id;
         this.api.addPhoto(photo).subscribe();
      });
    });

这是我的工作解决方案，但是我知道这是错误的，应该使用mergeMap和CombineLatest，但是我不知道如何。

更新1

我的解决方案

create(productForm) {
  this.api.createProduct(productForm).pipe(
    mergeMap(photo => {
      return combineLatest([
        productForm.photos.map(photo => {
          this.api.addPhoto({...photo, productId: product.id})//.subscribe()
          })
        ]);
   ).subscribe();
}

我无法在当前解决方案中添加照片。只有当我添加了对addPhoto的订阅时，它才起作用。

更新2

我的解决方案

create(productForm) {
  this.api.createProduct(productForm).pipe(
    mergeMap(photo => {
      const photos = [];
      productForm.photos.map(photo => {
        photos.push(this.api.addPhoto({...photo, productId: product.id}));
      });
      return combineLatest([...photos]);
   })
  ).subscribe();
}

现在它可以正常工作了。

Answer 1

尝试构建一个可以完成所有任务的管道。然后，一旦您需要-只需订阅一次。

还不清楚为什么在您的forEach中有comment和photo，拼写错误吗？

无论如何，您的序列可能看起来像这样：

const flow$ = this.api.createProduct(product).pipe(
  mergeMap(product => {
    const sequence = [];
    product.photos.forEach(photo =>
      sequence.push(this.api.addPhoto({...photo, productId: product.id)),
    );
    return forkJoin(...sequence); // <- once product has been created it adds its photos.
  }),
);

// then somewhere
flow$.subscribe(); // <- makes the whole pipe active.

或者您可以为照片创建一个Observable，并将其与流程集成。

const addPhotos =(product) => product.photos.map(photo => api.addPhoto({...photo, productId: product.id));

cont flow$ = api.createProduct(product).pipe(
  map(addPhotos),
  mergeMap(o$ => forkJoin(...o$)),
);

如何对多个订阅使用combinateLatest和mergeMap？

1 个答案: