Подписка на Observable из HTTP-запроса

Мой контроллер 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 на веб-сайте, поэтому я подписываюсь на Observable из http-клиента, но оно не отображается на экране.

Вот мой компонент 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; });
    }
}

Я действительно понятия не имею, как я могу это исправить.

Если вы добавите console.info(data) внутрь тела subscribe(), что будет записано? Кроме того, вы видите, как запрос выполняется на вкладке сети инструментов разработчика вашего браузера?

Alexander Staroselsky 20.02.2019 19:42

Я получил сообщение об ошибке: SyntaxError: "JSON.parse: неожиданный символ в строке 1 столбца 1 данных JSON"

pobu 20.02.2019 20:06

Но я понятия не имею, что могло пойти не так. Это простое текстовое сообщение

pobu 20.02.2019 20:12

Смотрите ответ, который я разместил. Спасибо!

Alexander Staroselsky 20.02.2019 20:15
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
249
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 и вы можете/должны использовать универсальный механизм ввода.

Надеюсь, это поможет!

Это было ключом к решению проблемы. Вы действительно помогли мне. Спасибо!

pobu 20.02.2019 20:44

Большое тебе спасибо! Это помогло мне, и вы объяснили это очень хорошо.

FelixDracul 15.09.2021 11:30

Другие вопросы по теме