Angular 5 切换到 HttpClient 中断了我的服务

Question

在Angular 5之前，我们从@angular/http导入并使用了Http。现在我们使用 @angular/common/http 中的 HttpClient。增加了一定程度的便利性，因为我们不需要在每次使用 .map(res => res.json()) 进行调用时将所有响应数据转换为 JSON 格式这一不必要的步骤。但是，现在我们不应该使用 .map。我们假设直接去 .subscribe()。同样，这应该很方便。但是，我曾经在我的服务中执行一些逻辑，在将数据返回到其他组件中的订阅函数之前，我的 API 调用是实时的。例如，

组件：

getData(id) {
    this.service.getDataFromApi(id).subscribe(res => this.doSomething(res));
}

服务：

public getDataFromApi(id) {
    if (this.data.length > 0) {
        return Observable.of(this.data);
    } else {
        return this.http.get(this.apiPath + id)
            .map((response: any) => {
                this.data = response.json();
                return this.data;
            });
    }
}

现在，他们建议我们将服务调用缩短为如下所示：

public getDataFromApi(id) {
    if (this.data.length > 0) {
        return Observable.of(this.data);
    } else {
        return this.http.get(this.apiPath + id);
    }
}

我不打算使用 .map，因为以后将不再支持它。在返回数据之前如何做一些逻辑？我不想调用一些已经存在且不会改变的数据。多个组件正在使用此服务。我是否应该在解决之前将每个服务调用变成原始承诺和运行一些逻辑？如果我只是在组件的函数上直接调用订阅，我什至不需要该服务。我在这里错过了什么吗？

Answer 1

如果您使用新的 HttpClient，则没有 res.json 方法。它会自动工作，只需像这样传递响应类型：

return this.http.get(this.apiPath + id)
        .toPromise()
        .then(data => {
            console.log(data)
            return data
        });

Answer 2

您可以使用map。新的 HttpClient 增加了默认响应类型 JSON 的便利性，但它仍然是 returns 和 Observable —— 并且没有计划从 Observable 中弃用 map API。

所以，你的代码只需要稍微修改一下（去掉.json()）：

public getDataFromApi(id) {
    if (this.data.length > 0) {
        return Observable.of(this.data);
    } else {
        return this.http.get(this.apiPath + id)
            .map((response: any) => {
                this.data = response;
                return this.data;
            });
    }
}

参见 Observable API 文档 here。

Angular 5 切换到 HttpClient 中断了我的服务

Angular 5 switch to HttpClient broke my services

javascript

observable

typescript

angular

angular5