非同期動作の完了角で

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

IはresizeImagesにおける2以上の操作が終了したら、操作を実行する必要があります。どうすれば2つの操作が完了したかを追跡できます。私はカウンタを使用して非同期操作の完了を追跡しています。完了を効率的に追跡する方法はありますか？

Answer 1

RxJS#forkJoin関数を使用することができます。すべての観測値が完了すると、最後の値が出力されます。あなたは書くことができます

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

コードの例。すべての観測が完了したときにのみ観察可能では

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>