角度异步操作完成

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 => ...) 

代码示例。可观察到的订阅，只有当所有观测值都完成的工程（其中一期工程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>