navigationend - router events angular 6

Angular 2 http consigue no obtener

Question

Soy nuevo en Angular 2 y sigo aprendiendo que estoy tratando de golpear una URL con una llamada get pero parece que el get no funciona incluso en la red del navegador No puedo encontrar esa URL get que se llama.

El programa va a la consola de ese método registrando por encima y por debajo de esa llamada, pero nada para la llamada

Mi metodo de servicio

import { Headers, Http, Response } from ''@angular/http'';
import { Injectable } from ''@angular/core'';
import { Persons } from ''./mock-people'';
import { Person } from ''./person'';
import {Observable} from ''rxjs/Rx'';

getAllPersons(): void {
  console.log("Here");
  this.http.get(`http://swapi.co/api/people/1`)
    .map((response: Response) => {
      console.log(response.json());
      response.json();
    });
  console.log("Comes here 2");
}

HttpModule importado en app.module.ts

Mi consola Captura de pantalla

Answer 1

Como lo menciona Milad en su answer , ya que los Observable devueltos por los métodos de Http son fríos / perezosos y no se dispararán hasta que se subscribe a ellos.

Pero digamos, ¿qué .subscribe si no desea .subscribe al Observable pero aún desea que se .subscribe la solicitud HTTP?

En caso de que esté usando Angular 6 con Rxjs6 y no quiera subscribe , puede hacer lo siguiente:

...
import { publish } from ''rxjs/operators'';
import { HttpClient } from ''@angular/common/http'';

constructor(private http: HttpClient) {}

getAllPersons() {
  const getAllPersons$ = this.http.get(`https://swapi.co/api/people/1`)
    .pipe(
        publish()
      );

  getAllPersons$.connect();
}

Aquí hay una muestra de StackBlitz para su referencia.

Answer 2

El método debe devolver la respuesta de la llamada api usando Observable.

service.cs

import { Http, Jsonp, Response, Headers, RequestOptions } from ''@angular/http'';
import { Injectable } from ''@angular/core'';
import { Persons } from ''./mock-people'';
import { Person } from ''./person'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/observable/forkJoin'';

@Injectable()
export class Service {
  constructor(private jsonp: Jsonp, private _http: Http) { }

  getAllPersons():Observable<any>{
    console.log("Here");

    let headers = new Headers({ ''Content-Type'': ''application/json'' });
    let options = new RequestOptions({ headers: headers, method: ''get'' });

    return this._http.get(''http://swapi.co/api/people/'' + personId)
        .map((res:Response) => {
            return <any>res.json();
        })
        .catch(this.handleError);          

    console.log("Comes here 2");
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || '' error'');
  }
}

Las opciones y los encabezados son opcionales.

Nota: en lugar de ( <any> ) puede definir su tipo de datos o cualquier otro tipo definido en el que obtenga datos en su respuesta.

Gracias.

Answer 3

Http usa rxjs y es un observable frío / vago, lo que significa que debe suscribirse a él para que funcione.

this.http.get(`http://swapi.co/api/people/1`)
  .map((response: Response) => {
    console.log(response.json());
    response.json();
  })
  .subscribe();

O si desea suscribirse desde otro lugar, debe devolver el método http.get esta manera:

getAllPersons(): Observable <any> {
  console.log("Here");
  return this.http.get(`http://swapi.co/api/people/1`)
    .map((response: Response) => {
      console.log(response.json());
      return response.json();
    });
}

y entonces :

getAllPersons().subscribe();