RxJS等待先前的执行完成

Question

好的，所以我是RxJs的新手，我无法弄清楚一些事情。 我需要实现图像处理，其中用户一次添加多个图像，并且对于每个图像，必须执行以下操作：

1. 在Web worker中生成图像缩略图
2. 将图像和缩略图上传到服务器

但我不想一次生成所有缩略图，我希望它们按顺序生成。 这是我尝试过的： https ： //codesandbox.io/s/funny-mountain-tm0jj？expandandvtools = 1＆fontize = 14

我还会在这里粘贴代码：

import { of } from "rxjs";
import { map } from "rxjs/operators";

const imageObservable = of(1, 2, 3, 4, 5);

function generateThumbnail(image) {
  console.log(`Generating thumbnail ${image}`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Finished generating thumbnail ${image}`);
      resolve({
        image,
        thumbnail: `This is a thumbnail of image ${image}`
      });
    }, 1500);
  });
}

async function upload(imagePromise) {
  const image = await imagePromise;
  console.log("Uploading", image);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("Finished uploading", image);
      resolve();
    }, 1500);
  });
}

imageObservable.pipe(map(generateThumbnail)).subscribe(upload);

我希望RxJS等待以前的generateThumbnail以执行当前调用（这就是它返回promise对象的原因）并等待上一次upload以执行当前调用（因此upload也返回promise）。 我不知道如何实现这一目标。 任何RxJS忍者都想帮助我吗？

Answer 1

要实现以下目标：

1. 缩略图生成应按顺序进行，重要的是 =>使用concatMap
2. 生成缩略图后应立即上传
3. 上传可以并行顺序完成=>使用map

所以最终的代码可能是

imageObservable
  .pipe(
    // preserve orders and wait for previous observable
    concatMap(generateThumbnail), 

    // map the generate
    map(upload)
  )
  .subscribe();

注意：upload不会等待generateThumbnail promise，因为这应该由concatMap本身处理。

async function upload(image) {
  console.log(`[upload] start ${image.image}`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`[upload] done ${image.image}`);
      resolve();
    }, 1000);
  });
}

Answer 2

您是否只想生成缩略图是顺序的，还是生成第二个缩略图需要等待上传第一个缩略图才能完成？

如果您不想等待上传，您只需要连接它们：

import { of, from, } from 'rxjs';
import { concatMap } from 'rxjs/operators';

const imageObservable = of(1, 2, 3, 4, 5);

function generateThumbnail(image) {
    console.log(`Generating thumbnail ${image}`);
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`Finished generating thumbnail ${image}`);
            resolve({
                image,
                thumbnail: `This is a thumbnail of image ${image}`
            });
        }, 1500);
    });
}

async function upload(imagePromise) {
    const image = await imagePromise;
    console.log('Uploading', image);
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('Finished uploading', image);
            resolve();
        }, 1500);
    });
}

// imageObservable.pipe(map(generateThumbnail)).subscribe(upload);

imageObservable.pipe(concatMap(image => from(generateThumbnail(image)))).subscribe();

concatMap做你想要的，我只是用你的创建运算符from你的Promise创建一个Observable ，我认为不需要它。 但是当你使用RxJs时，使用Observables而不是Promises通常更容易。

function generateThumbnail(image): Observable<any> {
    console.log(`Generating thumbnail ${image}`);
    return from(
        new Promise(resolve => {
            setTimeout(() => {
                console.log(`Finished generating thumbnail ${image}`);
                resolve({
                    image,
                    thumbnail: `This is a thumbnail of image ${image}`
                });
            }, 1500);
        })
    );
}

编辑：你能试试吗？

imageObservable
    .pipe(
        concatMap(image => generateThumbnail(image)),
        concatMap(image => upload(image))
    )
    .subscribe();