从 HTTP 请求订阅 Observable

Question

我的 Spring Boot 控制器发送字符串“hello Angular”作为对 http 请求的简单响应。

@Controller
@RequestMapping(path = "/u")
public class UController {
    @RequestMapping("/greet")
        public  @ResponseBody  String greet() {
            System.out.println("you are in the method greet() ");
            return "hello Angular";
    }
}

我在控制台 (System.out) 看到 Angular 请求了正确的方法，并且响应应该已经发送到客户端。

我想通过 Angular 在网站上打印这条消息，所以我从 http 客户端订阅了 Observable，但它没有出现在屏幕上。

这是我的 Angular 组件：

import { Component, OnInit } from '@angular/core';
import { HttpClientModule }    from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1> {{greeting}} </h1>
      </div>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

    greeting : string;

    constructor(private http: HttpClient){  }

    ngOnInit() {
        this.http.get<string>('http://localhost:8080/u/greet').subscribe(data => { this.greeting = data; });
    }
}

我真的不知道如何解决它。

Answer 1

发生错误是因为HttpClient 假定内容是有效的 JSON，而不是简单的字符串。它有效地尝试在内部解析 JSON。如果你尝试做JSON.parse("hello Angular")，它会显示完全相同的错误：

JSON.parse("hello Angular");

对于retrieve non-JSON content，您可以通过将响应类型指定为text 以及删除<string> 的通用类型来执行以下操作：

this.http.get('http://localhost:8080/u/greet', {responseType: 'text'})
  .subscribe(data => { this.greeting = data; });

否则，对于从服务器返回的任何实际 JSON (application/json) 数据，您无需提供 responseType 并且可以/应该使用通用类型机制。

希望对您有所帮助！