Angular4-所有http请求的中心错误日志记录和处理

我为所有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;

    }
}

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient，HttpParams，HttpResponse，HttpHeaders}；
从“rxjs”导入{Observable}；
/**
*围绕Http提供程序进行包装，以允许自定义Http请求
*/
@可注射（）
导出类HttpClientService{
私有httpParams:httpParams；
私有httpHeaders:httpHeaders；
建造师(
私有httpClient:httpClient，
私有共享服务：共享服务）{
this.httpParams=新的httpParams（）；
this.httpHeaders=新的httpHeaders（{'Access Control Allow Origin'：'*'）；
}
公共获取（url:string，httpParams:Array）{
返回此.httpClient
.get（url，{params:this.appendHttpParams（httpParams），headers:this.httpHeaders}）
.订阅（数据=>{
控制台日志（数据）；
},
错误=>{
控制台日志（err）；
});
}
私有appendHttpParams（paramArray:Array）：HttpParams{
paramArray.forEach（（值：Map，索引：number，数组：array）=>{
this.httpParams.append（value.keys[index]，value.values[index]）；
});
返回this.httpParams；
}
}

这个很好用。但是，当我尝试从自定义服务调用get时，如下所示

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

this.httpClientService.get（this.configService.url.fetchSettings，params）
.map（（响应）=>{
this.storedAppData=response.json（）；
console.log（this.storedAppData）；
返回此.storedAppData；
});

---

它抛出TS2339:类型“Subscription”错误上的属性“map”不存在。我知道我已经订阅了Observable，如果我去掉.subscribe（）并返回函数，我会工作得很好。但是，我无法在单个层上实现中央错误处理。有什么好办法吗？

我可以用.do（）运算符替换.subscribe（）。

我可以用.do（）运算符替换.subscribe（）。

类型错误解决了代码中的实际问题。订阅不应从应返回可观测值的方法返回：

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

---

类型错误解决了代码中的实际问题。订阅不应从应返回可观测值的方法返回：

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

---

public get（url:string，httpParams:Array）{var response=this.httpClient.get（url，{params:this.appendHttpParams（httpParams），headers:this.httpHeaders}）；response.subscribe（data=>{}，err=>{}）；return response；}这是一个比上面更优雅的方法。只需添加这一行

import'rxjs/add/observable/map'

删除关于

map

的错误，这似乎不是问题所在。如果我在没有subscribe（）的情况下返回get调用，它不会抛出错误.public get（url:string，httpParams:Array）{var response=this.httpClient.get（url，{params:this.appendHttpParams（httpParams），headers:this.httpHeaders}）；response.subscribe（数据=>{}，err=>{}）；return response；}比上面的方法更优雅。只需添加这一行

import'rxjs/add/observable/map'

删除关于

map

的错误，这似乎不是问题所在。如果我在不使用subscribe（）的情况下返回get调用，它不会抛出错误。Angular 4中是否有任何推荐的模式可用于反应式编程？@lohiarahul没有什么具体的，对RxJS 5的一般知识就足够了。如果你是RxJS新手，你可以先检查一下，因为RxJS 5文档很糟糕，RxJS 4文档也不错，但是它的API差别太大了。在Angular 4中，有没有推荐的反应式编程模式？@lohiarahul没有什么特别的，对RxJS 5的一般知识就足够了。如果您是RxJS新手，可以先查看，因为RxJS 5文档非常糟糕，RxJS 4文档也可以，但其API差别太大。