Angular - res.json() 不是一个函数

Question

我在使用API服务时遇到了问题。该服务连接到我的Node.js后端API。

错误信息如下：

ERROR TypeError: res.json is not a function

我最近将此服务更新为使用HTTPClient而不是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());
  }
}

- Kay

Answer 1

HttpClient.get() 方法会自动应用 res.json() 并返回 Observable<HttpResponse<string>>。您不再需要手动调用此函数。

请参见 Angular 4 中 HTTP 和 HTTPClient 的区别？

- courses.indepth.dev

---

我可以删除整行代码 .map((res: Response) => res.json()); 吗？ - Kay

如何从响应中获取头信息？ - bLaXjack

这似乎对 'Http.post() 也适用，这很合理。 - goneos

如果我仍然想调用它怎么办？我的意思是，我也需要原始响应。 - Christian Vincenzo Traina

Answer 2

您可以删除下面的整行：

 .map((res: Response) => res.json());

完全不需要使用map方法。

- Debarati Majumder

Answer 3

不需要使用这种方法：

 .map((res: Response) => res.json() );

不要使用之前的方法，改用这个简单的方法。希望你能得到想要的结果：

.map(res => res );

- Maizied Hasan Majumder

Answer 4

我遇到了类似的问题，我们想要从Angular 7中废弃的Http模块更新到HttpClient。但是应用程序很大，需要在许多地方更改res.json()。所以我这样做，以获得具有后向支持的新模块。

return this.http.get(this.BASE_URL + url)
      .toPromise()
      .then(data=>{
        let res = {'results': JSON.stringify(data),
        'json': ()=>{return data;}
      };
       return res; 
      })
      .catch(error => {
        return Promise.reject(error);
      });

从中心位置添加一个名为“json”的虚拟函数，以便在更新其他服务以适应新的响应处理方式（即不使用“json”函数）之前，所有其他服务仍然可以成功执行。

- Jyotirmay

---

谢谢！我遇到了完全相同的问题，这个方法对我有用。 - Jay Culpepper