角度異步操作完成

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>