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

Importado HttpModule en app.module.ts

Mi consola Captura de pantalla

Console]

49
user7161814 29 dic. 2016 a las 16:59

3 respuestas

La mejor respuesta

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 de 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();
99
SiddAjmera 14 oct. 2018 a las 12:43

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.

1
Amol Bhor 29 dic. 2016 a las 14:38

Como lo menciona Milad en su respuesta, ya que Observable s devueltos por los métodos de Http son fríos / perezosos y ganaron ' t dispara hasta que subscribe a ellos.

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

En caso de que esté utilizando 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 un Muestra StackBlitz para su referencia.

1
SiddAjmera 14 oct. 2018 a las 13:03