Angular4 - 中央エラーすべてのhttpリクエストのログと処理

Question

すべてのhttp呼び出しに対して、次のラッパークラスを開発しました。私はちょうど例にget関数を含めました。

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpParams, HttpResponse, HttpHeaders } from '@angular/common/http'; 
import { Observable } from 'rxjs'; 

/** 
* Wrapper around the Http provider to allow customizing HTTP requests 
*/ 
@Injectable() 
export class HttpClientService { 
    private httpParams: HttpParams; 
    private httpHeaders: HttpHeaders; 

    constructor(
     private httpClient: HttpClient, 
     private sharedService: SharedService) { 
     this.httpParams = new HttpParams(); 
     this.httpHeaders = new HttpHeaders({ 'Access-Control-Allow-Origin': '*' }); 

    } 

    public get<T>(url: string, httpParams: Array<Map<string, string>>) { 
     return this.httpClient 
      .get<T>(url, { params: this.appendHttpParams(httpParams), headers: this.httpHeaders }) 
      .subscribe(data => { 
       console.log(data); 
      }, 
      err => { 
       console.log(err); 
      }); 

    } 

    private appendHttpParams(paramArray: Array<Map<string, string>>): HttpParams { 
     paramArray.forEach((value: Map<string, string>, index: number, array: Array<Map<string, string>>) => { 
      this.httpParams.append(value.keys[index], value.values[index]); 
     }); 
     return this.httpParams; 

    } 
} 

これはうまくいきます。私は

this.httpClientService.get<StoredAppData[]>(this.configService.urls.fetchSettings, params) 
    .map((response) => { 
     this.storedAppData = response.json(); 
     console.log(this.storedAppData); 
     return this.storedAppData; 
    }); 

を次のようにカスタムサービスから入手呼び出すしようとすると、それはTS2339をスロー：プロパティ「マップ」「タイプにSubscription'error存在しません。 Observableを既に購読していて、.subscribe（）を取り除いて関数を返すだけでうまくいくことは分かります。しかし、私は単一のレイヤーで中央エラー処理を実装することはできません。それを行う良い方法は何でしょうか？

Answer 1

タイプエラーは、コードの実際の問題に対処します。サブスクリプションは、観察を返すことになっているメソッドから返されるべきではない：ホット、観察を返すことは望ましい効果がある

const response$ = this.httpClient.get<T>(...) 
response$.subscribe(data => ..., err => ...); 
return response$; 

ない限り、subscribeが全くサービス自体で実行するべきではありません。代わりに、副作用としてdo operatorを使用する必要があります。

この演算子は、オブザーバブルを正しい値またはその他の副作用をデバッグするのに便利です。

注：これはObservableのサブスクライブとは異なります。 doによって返されるObservableがサブスクライブされていない場合、Observerで指定された副作用は決して発生しません。したがって、単に既存の実行を脅かすだけで、サブスクリプションと同じように実行をトリガすることはありません。

return this.httpClient.get<T>(...) 
.do(data => ..., err => ...); 

Answer 2

.subscribe（）を.do（）演算子に置き換えることで実現できます。