Angular4 - Zentraler Fehler Protokollierung und Behandlung aller HTTP-Anfragen

Question

Ich habe die folgende Wrapper-Klasse für alle meine http-Aufrufe entwickelt. Ich habe gerade die Get-Funktion im Beispiel

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; 

    } 
} 

Dies funktioniert gut. Aber wenn ich versuche, die get aus einem benutzerdefinierten Dienst zu nennen, wie

folgt

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

Es wirft einen TS2339: Anwesen ‚Karte‘ existiert nicht auf Typ ‚Subscription'error. Ich verstehe, dass ich das Observable bereits abonniert habe und gut funktionieren würde, wenn ich das .subscribe() loswerde und die Funktion einfach zurückgebe. Allerdings kann ich dann keine zentrale Fehlerbehandlung auf einer einzelnen Ebene implementieren. Was könnte ein guter Weg sein, es zu tun?

Answer 1

Typ Fehler Adressen tatsächlichen Problem im Code. Ein Abonnement sollte nicht von einer Methode zurückgegeben werden, die eine beobachtbare zurückkehren soll:

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

Es sei denn, ein heißes beobachtbaren Rückkehr ein erwünschter Effekt ist, subscribe sollte nicht durchgeführt werden, in Dienst selbst. Stattdessen sollte do operator für Nebenwirkungen verwendet werden:

Dieser Operator ist nützlich für das Debuggen Ihrer Observables für die richtigen Werte oder die Durchführung anderer Nebenwirkungen.

Hinweis: Dies unterscheidet sich von einem Abonnement auf dem Observable. Wenn das Observable, das von do zurückgegeben wird, nicht abonniert ist, werden die vom Observer angegebenen Nebenwirkungen niemals auftreten. spioniert daher einfach die bestehende Ausführung aus, es löst keine Ausführung aus wie subscribe.

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

Answer 2

Ich könnte es durch Ersetzen von .subscribe() mit .do() -Operator tun.