RxJSのサブスクライブ方法の中で待つ方法

Question

RxJSサブジェクトのコールバックの中で、をasyncの機能で使用したいと思います。

Error:(131, 21) TS2304:Cannot find name 'await'.

async ngOnInit() { 
    this.subscriber = dateSubscription.subscribe((date: Date) => { 
    let dbKey = await this._someService.saveToDatabase(someObject); 
    // wait for db write to finish before evaluating the next code 
    // ... some other code here 
    }); 
} 

非async関数内で待つ呼び出そうとしたときに通常、私はこれを参照してください。以下はtypescriptですがtranspilerが言って文句のコード例です。どういうわけか、サブスクライブコールバックasyncを作成する必要がありますか、それとも私はこの問題についておしえていますか？関数saveToDatabaseはasyncであり、書き込まれたデータベースの主キーに解決されるとの約束を返します。

Answer 1

ようObservable.fromPromiseを使用することができますdateSubscription後に処理するために、任意の約束を持っている場合。

---

CFベンレッシュからこの Tweet：
（および作業Plunkr：：https://plnkr.co/edit/7SDLvRS2aTw9gYWdIznS?p=preview）

const { Observable } = Rx; 

const saveToDatabase = (date) => 
    new Promise(resolve => 
    setTimeout(() => 
     resolve(`${date} has been saved to the database`), 
     1000)); 

const date$ = Observable.of(new Date()).delay(1000); 

date$ 
    .do(x => console.log(`date received, trying to save it to database ...`)) 
    .switchMap(date => saveToDatabase(date)) 
    .do(console.log) 
    .subscribe(); 

ここ

---

は機能saveToDatabaseのモックを持つ例です

出力：

Answer 2

あなたが次のことを試すことができます。これはOnInitインタフェースを定義する方法角張っているので

ngOnInit() { 
    this.subscriber = dateSubscription.subscribe((date: Date) => { 
     (async() => { 
      let dbKey = await this._someService.saveToDatabase(someObject); 
      // ... some other code here 
     })(); 
    }); 
} 

Answer 3

async ngOnInit() { }は、間違った署名です。それはすべきで戻っvoid：

export interface OnInit { ngOnInit(): void; } 

あなたはあなたがawaitを使用する必要があり、また、あなたのPromiseObservableに変換する必要はありません

dateSubscription 
.flatMap(x=> 
     Observable.defer(Observable.fromObservable(this._someService.saveToDatabase(someObject))) 
    ).subscribe() 

Answer 4

あなたが直接await観測をすることはできません、しかし、あなたはPromiseをawaitすることができます。 observablesサブスクリプションでは、単に.toPromise()メソッドを使用できます。次の点を考慮

async ngOnInit() { 
    const date = await dateSubscription.toPromise();  
    let dbKey = await this._someService.saveToDatabase(someObject); 
} 

ときawaitあなたがDateオブジェクトを渡すことでしょうdateSubscriptionの約束。その後、実行の次の行を続けることができます。これにより、コードをより逐次的に読むことができます。

一部の人々は角度がngOnInitが完了するのを待たず、選択肢がないと考えています。与えられたTypeScripthereから結果のJavaScriptを見てください。ご覧のとおり、ngOnInitは、内部状態マシン（ジェネレータ）を内部的に管理して実行する待ち時間を呼び出します。 Angularはこれを支配しません。単にそのメソッドを呼び出すだけです。

Answer 5

あなただけの直接あなたが `flatMap`または` defer`を使用している場合、 `fromPromise`は不要です購読

this.subscriber = dateSubscription.subscribe(async (date: Date) => { 
    let dbKey = await this._someService.saveToDatabase(someObject); 
    // wait for db write to finish before evaluating the next code 
    // ... some other code here 
    });