rxjs/angularのObservablesを動的に連鎖する

Question

私は、オブジェクトから発生する可能性のある複数のイベントがある状況があります。これらのイベントはコンポーネントで処理され、REST APIに送信されます。しかし、特定のリソースのREST APIへの呼び出しを確実に直列に送信する必要があります。したがって、次のメソッドがあるとします：

someObjectCreated(objectCreated){ 
    this.http.post(...); 
} 

someObjectNameChanged(objectNameChanged){ 
    this.http.post(...); 
} 

someObjectDeleted(objectDeleted){ 
    this.http.delete(...); 
} 

これらのイベントハンドラメソッドは、いつでも呼び出すことができます。 SomeObjectCreatedのPOSTが返される前にsomeObjectCreatedが呼び出され、someObjectNameChangedがすぐに呼び出されるというシナリオがあるとします。

これらの観測値から結果を連鎖させる方法はありますか？私はこれらを約束に変えるのをやめて、それから連鎖して。これを達成するためにAngularで使用されるいくつかの一般的なパターンがありますか？

Answer 1

Observable.flatMap演算子を使用することができます。この方法で実現できます。

this.service.someObjectCreated(objectCreated) 
    .flatMap(objectNameChanged=> this.service.someObjectNameChanged(objectNameChanged)) 
    .flatMap(secondMethodResult => this.service.someObjectDeleted(secondMethodResult)) 
    .subscribe(thirdMethodResult => { 
      console.log(thirdMethodResult); 
    }); 

Answer 2

は、私はあなたが最初の応答を来る前に、同じオブジェクトを持つ第2の要求を発射した場合、あなたは、元を失うことになるため、送られたすべての要求の前にローダーを入れて、完全な後にそれを削除し、応答ごとに、あなたのオブジェクトを更新する必要があると思いますデータ。

Answer 3

RxJSとは関係ないと思います。必要なアクションを約束で簡単に連鎖させることができます。あなたは（ちょうどあなたのアイデアを与え、無エラー処理）、このためのいくつかの一般的な機能/クラスを作成することができます。

class QueuedActions { 

    private currentlyRunning: Promise<void> = Promise.resolve(); 

    public submit(task:() => Promise<void>): Promise<void> { 
     const prevActionPromise = this.currentlyRunning; 
     // substitute current promise for next call 
     this.currentlyRunning = new Promise<void>(async (resolve, reject) => { 
      // wait for previous actions to finish 
      await prevActionPromise; 
      // perform submitted task 
      await task(); 
      // resolve current promise, so next action can go ahead 
      resolve(); 
     }); 
     return this.currentlyRunning; 
    } 

} 

ですから、チェーン、必要に応じて任意の関数は約束を返すことができます。

someObjectCreated(objectCreated){ 
    this.queuedActions.submit(() => this.http.post(...)); 
} 

someObjectNameChanged(objectNameChanged){ 
    this.queuedActions.submit(() => this.http.post(...)); 
} 

Answer 4

は次のように試してみてくださいway chain method flatMap()

this.service.someObjectCreated(queryParam) 
    .flatMap((someObjCreatedRsp) => { 
     console.log('someObjCreatedRsp', someObjCreatedRsp); 
     return this.service.someObjectNameChanged(queryParam) 
    }) 
    .flatMap((someObjNameChangedRsp) => { 
     console.log('someObjNameChangedRsp', someObjNameChangedRsp); 
     return this.service.someObjectDeleted(queryParam) 
    }) 
    .subscribe((someObjDeletedRsp) => { 
     console.log('someObjDeletedRsp', someObjDeletedRsp); 
    });