Question

我正在使用第三方库（ng2-img-tools）来执行图像调整大小。该库提供了不同的功能来执行图像大小调整，例如

调整大小，作物， resizeExactCrop。

以上功能是异步操作。

例如。

 resizeImage(files:any, width:number, height:number){
    return this.ng2ImgToolsService.resize(files, width, height)
    .map((result:any) => result)
    .catch((error:any) => error);
  }

  //For Thumbnails
  resizeExactCrop(files:any, width:number, height:number){
    return this.ng2ImgToolsService.resizeExactCrop(files, width, height)
    .map((result:any) => result)
    .catch((error:any) => error);
  }

我正在调用2个以上的函数来调整图像大小。

resizeImages(){
     this.resizeImage([img1],400,400).subscribe(data => {
        console.log("Resized Image is "+data); //1st finished
    },
    error => console.log("Resizing Image Failed", error));

     this.resizeExactCrop([img1],100,100).subscribe(data => {
        console.log("Cropped Image is "+data); //2nd finished
    },
    error => console.log("Resizing Image Failed", error));
   }

当resizeImages中的2个以上操作完成时，我需要执行操作。如何跟踪两个操作是否完成。我正在使用计数器来跟踪异步操作完成情况。有没有办法有效地跟踪完成情况。

Answer 1

您可以使用RxJS#forkJoin函数 - 当所有可观察对象完成时，发出它们的最后一个值。你可以写

Observable.forkJoin(
   this.resizeImage([img1],400,400),
   this.resizeExactCrop([img1],100,100)
).subscribe(values => ...)

代码示例。 Observable订阅仅在所有Observable完成时才有效（其中一个可以延迟2秒）

const Observable = Rx.Observable;

console.log('Start');

Observable.forkJoin(
  Observable.of(4),
  Observable.of('Hello').delay(2000)
).subscribe(values => console.log(values));

<script src='https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/Rx.js'></script>

Angular中的异步操作完成

1 个答案: