javascript - Angular 中的异步操作完成

Question

我正在使用第 3 方库 ( ng2-img-tools ) 来执行图像调整大小。 该库提供了不同的函数来执行图像调整大小，例如

调整大小， 庄稼， 调整精确裁剪的大小。

以上函数均为异步操作。

例如。

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

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

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中的上述两个操作完成后，我需要执行一个操作。我如何跟踪这两个操作是否完成。我正在使用计数器来跟踪异步操作的完成情况。有什么方法可以有效地跟踪完成情况。

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>