我的API服务有问题.此服务连接到我的nodejs后端api.

错误显示

ERROR TypeError: res.json is not a function

在最近更新此服务以使用HTTPClient而不是Http之后,我出现了此错误.我收到这个回复是因为我错过了旧的http和新的http?如果是这样,有没有新的回应,我该如何使用?

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { JwtService } from './jwt.service';

@Injectable()
export class ApiService {
  constructor(
    private http: HttpClient,
    private jwtService: JwtService
  ) {}

  private setHeaders(): HttpHeaders {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    };
    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = this.jwtService.getToken();
    }
    return new HttpHeaders(headersConfig);
  }

  private formatErrors(error: any) {
     return Observable.throw(error.json());
  }

  get(path: string, httpParams: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), params: httpParams })
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  put(path: string, body: Object = {}): Observable<any> {
    return this.http.put(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
      body,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  delete(path): Observable<any> {
    return this.http.delete(
      `${environment.api_url}${path}`,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
}

推荐答案

HttpClient.get()自动应用res.json()并返回Observable<HttpResponse<string>>.你不再需要自己调用这个函数.

Difference between HTTP and HTTPClient in angular 4?

Angular相关问答推荐

Angular - Bootstrap 5 Carbon不工作

Angular 形式验证:在空和不匹配的密码上显示错误

Angular 动画—淡出适用于DIV,不完全适用于子组件

如何在投影项目组周围添加包装元素?

MAT表的内联文本编辑-未刷新编辑图标

从、管道和映射可观察到的逻辑?

出错后可观察到的重用

使用 RXJS 进行空闲/不活动跟踪

关闭 Dynamsoft Web Twain 弹出窗口

*ngIf 和 *ngFor 在 元素上使用

Angular 2:无法绑定到 x,因为它不是已知的本机属性

在Angular2的 Select 列表中设置最初 Select 的项目

Angular 5 响应式表单 - 单选按钮组

在Angular 6 中找不到 HammerJS

没有 ChildrenOutletContexts 的提供者 (injectionError)

NPM 脚本 start退出,但未指示 Angular CLI 正在侦听请求

包 '@angular/cli' 不是依赖项

在angular-cli中创建模块时生成路由模块

为什么 Angular 项目中没有 Angular-CLI 为 model生成命令?

需要选中一个复选框