对 Web api 的 Http Post 调用的响应为空 - Angular 4

Question

我正在尝试使用 HttpClient 从 Angular 4 对 web api 进行后期调用。

这是我的后调用服务：

public add<T>(type:string, item: T): Observable<any> {
        console.log("api data : " + this.url + type);
        return this.http
            .post(this.url + type, JSON.stringify(item)).map((res: Response) => { console.log("rese: "+res); res});
    }

这是订阅上述服务的代码：

addArticleType(articleType: ArticleType): void {
        console.log("Service data : " + articleType);
        this.service.add("ArticleType", articleType).subscribe((val: any) => this.response = val),
            (error: any) => { console.log("Error is: " + error) },
            () => { console.log("resp: " + this.response) };

    }

这是 API

 public HttpResponseMessage Add(A item)
    {
        int a = this.service.Add(item);
        log.Debug("value: " + a);
        if (a > 0)
        {
            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent("Data saved successfully.", Encoding.UTF8, "application/json");
            return response;
        }

        return Request.CreateErrorResponse(HttpStatusCode.ExpectationFailed, "Failed to save data");

    }

在 Post 调用时，API 接收调用并执行将数据存储在数据库中的任务。但是 Angular 不会接收 API 作为 HttpResponseMessage 发送的任何响应。

正如您在服务中看到的，我正在尝试在控制台中打印响应。这总是打印空值。作为回应，我希望 API 发送的消息“数据已成功保存。”，但我得到的是空值。

我可能遗漏了一些非常基本的东西。我查看了很多文章和博客，但没有找到任何可以解决问题的方法。

更新：

根据提供的指南，我更新了我的代码，如下所示。

通话后

  public add<T>(type:string, item: T): Observable<T> {
    console.log("api data : " + this.url + type);
    return this.http
        .post<T>(this.url + type, item);
}

订阅

addArticleType(articleType: ArticleType): void {
        console.log("Service data : " + articleType);
        this.service.add<ArticleType>("ArticleType", articleType)
            .subscribe(
            (val: any) => {
                this.response = val;
                console.log("res sub: " + this.response);
            },
            (error: any) => { console.log("Error is: " + error) },
            () => { console.log("resp: " + this.response) });

    }

它仍然在控制台中将响应打印为 null。

Answer 1

如果您的服务器没有返回任何内容（状态 200 没有正文），您需要设置 responseType: 'text' 以处理该行为

...
public add<T>(type:string, item: any): Observable<any> {
  return this.http.post(this.url + type, item, { responseType: 'text' });
}
...

并且在控制器中简单地处理成功和错误调用

this.service.add("ArticleType", articleType).subscribe(
  () => // success handle,
  err => // error handle
)

如果您需要在响应正文中接收文本消息，您需要确保它在开发控制台中传递（如果网络响应为空，请检查此How to create a response message and add content string to it in ASP.NET 5 / MVC 6） 当浏览器收到响应时，您可以像这样处理它：

...
// Service
public add<T>(type:string, item: any): Observable<any> {
  return this.http.post(this.url + type, item);
}

...
// Controller
this.service.add("ArticleType", articleType).subscribe(
  res => {
    console.log(res);
    // here some success handle,
  }
  err => // error handle
)

Answer 2

您在此服务器端代码中返回的似乎不是有效的 JSON：

  response.Content = new StringContent(
       "Data saved successfully.",
       Encoding.UTF8,
       "application/json");

你应该有一些看起来像：

  response.Content = new StringContent(
       "{\"Result\": \"Data saved successfully.\"}",
       Encoding.UTF8,
       "application/json");