web-dev-qa-db-fra.com

Angular2 Promise: Comment utiliser la réponse de Http Get

Je suis nouveau sur Angular et sur ce tutoriel pour apprendre les bases. Considérez l'appel http suivant. 

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
  }

Après avoir converti l'observable en promesse, comment puis-je vraiment utiliser la réponse (journal de la console, analyse et accès à un élément de réponse, etc.) à l'aide d'une fonction dans la clause then ()?

J'ai essayé ce qui suit, même s'il enregistre la réponse, je ne peux pas accéder à quoi que ce soit dans l'objet de réponse.

this.http.get(url, {headers : this.headers})
                        .toPromise()
                        .then(function(res) {
                                console.log(res);
                                return res => res.json().data as Query[];
                        })
                        .catch(this.handleError);

Toute aide serait très appréciée. Je vous remercie.

javascripthttpangularpromise
4
Maddy

Angular2 utilise RXjs observable au lieu de promesses. Cela fonctionne comme suit.

créez httpService comme suit.

httpService.ts 

import {Injectable, Inject} from '@angular/core';
import {Http, Response, RequestOptions, Request, Headers} from '@angular/http';

declare let ApiUrl : any;

@Injectable()
export class httpService {
    constructor(private http: Http){}

    getHeader = () => {
        let headers = new Headers();
        headers.append("Content-Type", 'application/json');

        return headers;
    };

    request = (req) => {
        let baseUrl = ApiUrl,
            requestOptions = new RequestOptions({
            method: req.method,
            url: baseUrl+req.url,
            headers: req.header ? req.header : this.getHeader(),
            body: JSON.stringify(req.params)
        });

        return this.http.request(new Request(requestOptions))
                        .map((res:Response) => res.json());
    }
}

Maintenant, utilisez simplement ce service dans vos composants/directives comme ci-dessous:

composant.ts 

import {Component, Inject, Directive, Input, ElementRef} from '@angular/core';

@Directive({
  selector: '[charts]' // my directive name is charts
})
export class chartsDirective{

  constructor(@Inject('httpService') private httpService){}

  ngOnInit(){

    this.httpService.request({method: 'POST', url: '/browsers', params:params, headers: headers})
            .subscribe(
                data => self.data = data, //success
                error => console.log('error', error),
                () => {console.log('call finished')}
            )
  }
}

Et enfin, vous devez simplement ajouter votre httpService au fournisseur de ngModule:

appModule.ts 

import {NgModule} from '@angular/core';
import {ApiService} from "./api.service";

@NgModule({
    providers: [
        {provide : 'httpService', useClass : httpService}
    ]
})

export class apiModule{}

Maintenant, vous pouvez utiliser httpService n'importe où dans votre code en injectant comme nous l'avons fait dans composant.ts

3
jigar gala

voici un exemple de la façon dont vous pouvez le faire.

Pas nécessaire mais donne une structure de code Nice créer un service qui gère toutes vos demandes d'utilisateurs:

Service utilisateur 

@Injectable()
export class UserService {

   constructor(private http: Http) { }

   getById(id: string): Observable<User> {
      return this.http.get("http://127.0.0.1" + '/api/CustomUsers/' + id)
      // ...and calling .json() on the response to return data
      .map((res: Response) => {
         var user = User.withJSON(res.json());
         return user;
      })
      //...errors if any
      .catch((error: any) => Observable.throw(error));
   }
}

Nous allons donc ici chercher l'utilisateur avec un identifiant donné et créer un objet utilisateur avec le json retourné.

Modèle d'utilisateur 

export class User {

    constructor(public id: string, public username: string, public email: string) {

    }

    static withJSON(json: any): User {

        // integrity check
        if (!json || !json.id || !json.username || !json.email) { return undefined; }

       var id = json.id;
       var username = json.username;
       var email = json.email;

       // create user object
       var user = new User(id, username, email);
       user.firstname = firstname;

       return user;
   }

Appel de service 

this.userService.getById(this.id).subscribe(user => {
    this.user = user;
  },
    err => {
       console.error(err);
    });

J'espère que cela t'aides

1
blacksheep_2011

J'ai eu un problème similaire. Après avoir débogué l'objet de réponse, j'ai constaté que les données n'existaient pas sur l'objet res.json (). Changez en ceci à la place:

this.http.get(url, {headers : this.headers})
                    .toPromise()
                    .then(function(res) {
                            console.log(res);
                            return res => res.json() as Query[];
                    })
                    .catch(this.handleError);

Notez que tout ce que j'ai fait a été de changer la ligne qui se lit return res => res.json().data as Query[];

à return res => res.json() as Query[];

0
nathanjessen