从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"); 

要检索非JSON内容 ，您可以通过将响应类型指定为text并删除<string>的通用类型来执行以下操作：

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

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

希望有帮助！