Observableを返す間に返されるObservableを購読する方法

Question

私はHttpを拡張するAuthHttpServiceを持っています。要求が行われるたびにObservableが返されますが、HTTPService自体の内部で何らかのアクションを取ることも望みます。それをどうやって行うことができますか？例えば

：

get(url: string) { 
    this.pendingRequests++; 
    return this.http.get(this.config.apiUrl + '' + url, { headers: this.getHeaders(this.config.apiUrl + url) }) 
     .subscribe(() => { 
     if (this.pendingRequests > 0) { 
      this.pendingRequests--; 
     } 
     }); 

    } 

私はロードスピナーを表示するthis.pendingRequests > 0を使用しています。 authHttp.get（）と呼ばれるサービスに実際の応答を戻したいのですが、authHttpでpendingRequestsを単独で管理したいのですが、どうすれば購読しなくても何かできますか？このメソッドを呼び出す私のサービスはProperty 'map' does not exist on type 'Subscription'という意味では不平を言っていますが、それ以外の方法はわかりません。

コンポーネントのサービスがObservableを期待している代わりにサブスクリプションを取得するAuthHttp.getを呼び出しているときにエラーが発生します。私は、AuthHttpが購読するのにまだサブスクリプションを返す方法があるのだろうかと思っています。

Answer 1

最も簡単な方法は、「副作用」を適用することです

get(url: string) { 
    this.pendingRequests++; 
    return this.http.get(this.config.apiUrl + '' + url, { headers: this.getHeaders(this.config.apiUrl + url) }) 
     .do(() => { 
     this.pendingRequests = Math.max(0, this.pendingRequest - 1); 
     }); 
    } 

オプションで、より高度な取得し、各要求をラップするSubscriptionを使用することができdoブロックすることです：

const PendingRequest = (onStart, onFinish) => { 
    onStart(); 
    return onFinish; 
} 

const defaultRequest =() => PendingRequest(
() => this.pendingRequest++, 
() => this.pendingRequests = Math.min(0, this.pendingRequests - 1) 
); 

get(url: string) { 
    return Observable.using(
    defaultRequest, 
    pendingRequest => this.http.get(url, {headers}) 
); 
} 

もう1つはもう少し冗長に見えるかもしれませんが、実際には要求があった時点で保留中の要求カウンタを更新するという利点がありますは、を開始します。つまり、サブスクリプションされているとき（最初の反復では、サブスクリプションと同じではない関数呼び出しで増分されます）。

さらに、副作用変数に頼らずに、リクエストオブジェクトの周りに必要な追加ロジック（タイミングやメトリックを考える）を格納することができます。

Answer 2

@ silentsodの勧告に基づいて、私は現在、オブザーバブルを作成してそれにサブミットしています。

let req = this.http.put(
    this.config.apiUrl + '' + url, JSON.stringify(this.request), 
    { headers: this.getHeaders(this.config.apiUrl + url + JSON.stringify(this.request)) } 
) 
    .catch(err => { 
    if (err.status === 401 || err.status === 403) { 
     let res: Response = err; 
     window.location.replace(this.config.membershipUrl + 
     '/#/Home?ReturnURL=' + this.config.appUrl + '/#/authorize&appID=24B89F21-54ED-4073-94AA-BDC354668667'); 
     return Observable.of(res.json()); 
    } else if (err.status === 500) { 
     this.router.navigateByUrl('/error'); 
    } 
    }); 
req.subscribe(() => { 
    if (this.pendingRequests.getValue() > 0) { 
    pending = this.pendingRequests.getValue(); 
    this.pendingRequests.next(pending - 1); 
    } 
}); 
return req;