HttpClient导致错误

Question

我正在使用 Angular 4 并想开始使用 HttpClient。但是我收到 JSON 解析错误，经过大量搜索后我还无法修复它。

老方法

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { _throw } from 'rxjs/observable/throw';
import { AppConfig } from '../config/app.config';
import { AuthenticateService } from '../security/shared/authenticate.service';
import { IFlower } from './flower.model';

addFlower(Flower: IFlower): Observable<any> {
    this._auth.checkToken();
    const headers = new Headers();
    this.createAuthorizationHeader(headers, this._auth.token);
    headers.append('Content-Type', 'application/json');
    this.options = new RequestOptions({ headers: headers });
    return this._http.post(this.apiUrl + 'flower/insert', JSON.stringify(Flower),
        this.options).map((res: Response) => <any>res).catch(this.handleError);
}

转换为 HttpClient

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { _throw } from 'rxjs/observable/throw';
import { AppConfig } from '../config/app.config';
import { AuthenticateService } from '../security/shared/authenticate.service';
import { IFlower } from './flower.model';

    addFlower(Flower: IFlower): Observable<any> {
        this._auth.checkToken();
        const httpOptions = {
            headers: new HttpHeaders({
                'Authorization': 'Bearer ' + this._auth.token,
                'Content-Type':  'application/json'
            })
        };

        return this._http.post<any[]>(this.apiUrl + 'flower/insert', JSON.stringify(Flower), httpOptions)
            .pipe(
                catchError(this.handleError)
            );
    }

在转换为 HttpClient 时，我收到以下错误消息

后端控制器代码：

[HttpPost]
[Route("insert")]
public HttpResponseMessage AddFlower(Flower flower)
{
    try
    {
        _flowerervice.AddFlower(flower, token));
        return Request.CreateResponse(HttpStatusCode.Created);
        throw new HttpResponseException(Request.CreateErrorResponse(HttpStatusCode.Forbidden, "Forbidden"));
    }
    catch (Exception exception)
    {
        throw ExceptionMessageUtility.HttpResponse(Request, exception);
    }
}

我一直在寻找 SO 和其他来源。 This SO 帖子解释了 HttpClient 但这仍然不能解决我的错误。非常感谢任何帮助。 谢谢

Answer 1

Angular 的 HttpClient 最近发生了重大变化，这意味着反序列化带有空内容的 HTTP 200 OK 响应的 JSON 主体现在会触发此“JSON 数据中的数据意外结束”错误，因为它应该使用HTTP 204 No Content。见这里：https://github.com/angular/angular/issues/20879

有 3 种可能的修复方法：

1. 更改您的网络服务，使其返回带有空正文的 HTTP 204。
2. 更改您的网络服务，使其返回带有非空正文的 HTTP 200。
3. 更改您的客户端代码，使其将空响应作为字符串返回，而不是尝试将其反序列化为 JSON（设置 { responseType: "text" }）。