Angular - res.json() is not a function Angular - res.json()不是一个函数

30 浏览
0 Comments

Angular - res.json() is not a function Angular - res.json()不是一个函数

我遇到了一个与我的API服务相关的问题。这个服务连接到我的nodejs后端API。

错误信息是：

ERROR TypeError: res.json is not a function

我在最近将这个服务更新为使用HTTPClient而不是Http之后遇到了这个错误。我得到这个响应是因为我错过了新的http与旧的http？如果是这样的话，是否有一个新的Response，以及如何使用它？

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 {
    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 {
    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 {
    return this.http.post(
      `${environment.api_url}${path}`,
      body,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
  delete(path): Observable {
    return this.http.delete(
      `${environment.api_url}${path}`,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
}

0

3 答案

0 Comments

Angular - res.json() is not a function问题出现的原因是在新版本的Angular中，HttpClient.get()方法会自动应用res.json()，并返回Observable<HttpResponse<string>>，所以不再需要手动调用res.json()函数。

解决方法是将.map((res: Response) => res.json())这一行代码移除即可。

如果还想获取响应中的headers，可以通过HttpResponse对象的headers属性来获取。

对于'Http.post()方法也是同样的情况，这是很合理的。

如果仍然希望手动调用res.json()函数，可以使用res.body来获取原始响应。

0
0 Comments

在Angular中，当使用.map((res: Response) => res.json() );方法时，可能会遇到res.json() is not a function的错误。这个错误的出现是因为在最新版本的Angular中，res.json()方法已经被弃用。

解决这个问题的方法是使用.map(res => res ); 这个简单的方法来替代之前的方法。这样就能够正确地获取到结果。

所以，如果你在使用Angular时遇到了res.json() is not a function的错误，可以尝试使用.map(res => res );来替代之前的方法，希望能够解决问题。

0
0 Comments

Angular - res.json() is not a function问题的出现原因以及解决方法

在使用Angular进行开发过程中，有时会遇到一个常见的问题：Angular - res.json() is not a function。这个问题的出现是因为在代码中使用了.map((res: Response) => res.json())这一行代码，而实际上这个方法已经被弃用，不再被支持。所以需要找到解决方法来修复这个问题。

解决这个问题的方法非常简单，只需要将以下代码删除即可：

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

实际上，不需要使用.map方法。在新版本的Angular中，可以直接使用HttpClient的内置方法来获取响应的数据。

以下是修复Angular - res.json() is not a function问题的修改方法：

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
// 使用HttpClient发送HTTP请求
this.http.get(url).subscribe((res) => {
  // 处理响应数据
});

通过以上修改，就可以解决Angular - res.json() is not a function这个问题了。这样，就能够在Angular应用中正确地获取响应的数据，而不再出现该错误。

0