web-dev-qa-db-fra.com

Angular 2 http obtenir ne pas obtenir

Je ne connais pas encore Angular 2 et j'apprends encore que j'essaye de frapper une URL avec un appel à get, mais le get ne semble pas passer, même dans le réseau du navigateur.

Le programme se connecte à la console de cette méthode en se connectant au-dessus et au-dessous de cet appel, mais rien pour l'appel

Ma méthode de service

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 importé dans app.module.ts 

Ma console Capture d'écran

Console]

angularangular-http
36
user7161814

Http utilise rxjs et est une observable froide/paresseuse, ce qui signifie que vous devez vous y abonner pour que cela fonctionne. 

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

Ou si vous souhaitez vous abonner ailleurs, vous devriez renvoyer la méthode http.get comme ceci: 

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

et alors : 

getAllPersons().subscribe();
78
Milad

la méthode devrait renvoyer la réponse de l'appel api en utilisant 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');
  }
}

les options et les en-têtes sont facultatifs.

Remarque: au lieu de (<any>), vous pouvez définir votre type de données ou tout autre type défini dans lequel vous obtenez des données dans votre réponse.

Je vous remercie.

1
Amol Bhor

Comme mentionné par Milad dans son réponse , étant donné que Observables renvoyé par les méthodes de Http est froid/paresseux et ne se déclenchera pas tant que vous n'êtes pas subscribe.

Mais disons ce qui se passe si vous ne voulez pas .subscribe au Observable mais voulez quand même que la demande HTTP soit déclenchée?

Si vous utilisez Angular 6 avec Rxjs6 et que vous ne voulez pas utiliser subscribe, vous pouvez procéder comme suit:

...
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();
}

Voici un Sample StackBlitz pour votre réf.

0
SiddAjmera