Используйте наблюдаемый, чтобы получить ответ HTTP

Question

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  formData = {
    first_name:"",
    last_name:"",
    middle_name:"",
    mobile_number:"",
    email_address:"",
    password:"",
    confirm_password:""
  };  

  constructor(private httpClient:HttpClient) {

  }

  ngOnInit() {
    console.log(this.httpClient.get("http://localhost:8000"));
    // how to use this returned Observable to get the actual response.
  }

  submittedDetails(){
      console.log('FirstName: ' + this.formData.first_name);
      console.log('LastName: ' + this.formData.last_name);
      console.log('MiddleName: ' + this.formData.middle_name);
      console.log('Email Address: ' + this.formData.email_address);
      console.log('MobileNumber: ' + this.formData.mobile_number);
      console.log('Password: ' + this.formData.password);
      console.log('Confirm Password: ' + this.formData.confirm_password);   
  }
}

• Я играю с приведенным выше кодом, чтобы получить ответ HTTP. Прямо сейчас я изучаю Angular. Причина сделать HTTP-вызов на ngInit() исключительно для целей обучения.

• Я использую Угловой 6 .

Сложность / Выпуск:

Я смог сделать запрос к моему внутреннему коду и коду внутри ngInit() возвращает мне Observable. Теперь, как использовать это, чтобы увидеть фактический полученный ответ?

Давайте предположим, что ответом типа содержимого может быть что угодно. Я прошу прощения, если я понял что-то не так (в англоязычном контексте) здесь.

Answer 1

Если вы хотите инициировать запрос в вашем компоненте / услуге, вы должны подписаться на него.

 this.httpClient.get("http://localhost:8000").subscribe(response => {
           // do some action
        });

Answer 2

Вы должны подписаться на наблюдаемые:

this.httpClient.get("http://localhost:8000").subscribe(data => {
   console.log(data);
});

Обратите внимание, что по умолчанию httpClient ожидает получения JSON и анализирует его для вас. Если ваш ответ возвращает что-то еще, вам следует изменить запрос.