web-dev-qa-db-fra.com

Http poster et recevoir la demande en angular 6

Dans angular 5.2.x pour http get et post, j'avais ce code:

post(url: string, model: any): Observable<boolean> {

return this.http.post(url, model)
  .map(response => response)
  .do(data => console.log(url + ': ' + JSON.stringify(data)))
  .catch(err => this.handleError(err));
 }
 get(url: string): Observable<any> {

return this.http.get(url)
  .map(response => response)
  .do(data =>
    console.log(url + ': ' + JSON.stringify(data))
  )
  .catch((error: any) => Observable.throw(this.handleError(error)));
 }

Dans angular 6, cela ne fonctionne pas.

Comment pouvons-nous faire un post HTTP ou obtenir une demande?

httprequestobservableangular6
25
unos baghaii

Mise à jour: dans angular 7, ils sont identiques à 6

Dans angular 6

la réponse complète trouvée dans exemple en direct

  /** POST: add a new hero to the database */
  addHero (hero: Hero): Observable<Hero> {
 return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
  .pipe(
    catchError(this.handleError('addHero', hero))
  );
}
  /** GET heroes from the server */
 getHeroes (): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
  .pipe(
    catchError(this.handleError('getHeroes', []))
  );
}

c'est à cause de pipeable/lettable operators qui maintenant angular peut utiliser tree-shakable, supprimer les importations inutilisées et optimiser l'application

certaines fonctions de rxjs sont modifiées

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

plus dans MIGRATION

et les chemins d'importation

Pour les développeurs JavaScript, la règle générale est la suivante:

rxjs: méthodes de création, types, ordonnanceurs et utilitaires

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

rxjs/opérateurs: tous les opérateurs raccordables:

import { map, filter, scan } from 'rxjs/operators';

rxjs/webSocket: l'implémentation du sujet du socket web

import { webSocket } from 'rxjs/webSocket';

rxjs/ajax: l'implémentation Rx ajax

import { ajax } from 'rxjs/ajax';

rxjs/testing: les utilitaires de test

import { TestScheduler } from 'rxjs/testing';

et pour la compatibilité ascendante, vous pouvez utiliser rxjs-compat

34
unos baghaii

Vous pouvez faire un post/get en utilisant une bibliothèque qui vous permet d'utiliser HttpClient avec des rappels fortement typés .

Les données et l'erreur sont disponibles directement via ces callbacks.

La bibliothèque s'appelle angular-extended-http-client .

bibliothèque client angulaire-étendu-http sur GitHub

bibliothèque client angulaire-étendu-http sur NPM

Très facile à utiliser.

Approche traditionnelle

Dans l'approche traditionnelle, vous retournez Observable <HttpResponse<T>> à partir de l'API Service. Ceci est lié à HttpResponse.

Avec cette approche, vous devez utiliser . Subscribe (x => ...) dans le reste de votre code.

Cela crée un couplage étroit entre la couche http et le reste de votre code .

Approche de rappel fortement typée

Vous ne traitez que vos modèles dans ces rappels fortement typés.

Par conséquent, le reste de votre code ne connaît que vos modèles.

Utilisation de l'échantillon

Les rappels fortement typés sont

Succès:

  • IObservable <T>
  • IObservableHttpResponse
  • IObservableHttpCustomResponse <T>

Échec:

  • IObservableError <TError>
  • IObservableHttpError
  • IObservableHttpCustomError <TError>

Ajouter un package à votre projet et à votre module d'application

import { HttpClientExtModule } from 'angular-extended-http-client';

et dans les importations @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Vos modèles


export class SearchModel {
    code: string;
}

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

Ton service

Dans votre service, vous créez simplement des paramètres avec ces types de rappel.

Ensuite, transmettez-les à la méthode get de HttpClientExt .

import { Injectable, Inject } from '@angular/core'
import { SearchModel, RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    searchRaceInfo(model: SearchModel, success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.post<SearchModel, RacingResponse>(url, model, 
                                                      ResponseType.IObservable, success, 
                                                      ErrorType.IObservableError, failure);
    }
}

Votre composant

Dans votre composant, votre service est injecté et l'API searchRaceInfo est appelée comme indiqué ci-dessous.

  search() {    


    this.service.searchRaceInfo(this.searchModel, response => this.result = response.result,
                                                  error => this.errorMsg = error.className);

  }

Les deux réponses et les erreurs renvoyées dans les rappels sont fortement typées. Par exemple. réponse est de type RacingResponse et erreur est APIException .

2
Shane

Pour lire la réponse complète dans Angular, vous devez ajouter l'option observer:

{ observe: 'response' }

    return this.http.get(`${environment.serverUrl}/api/posts/${postId}/comments/?page=${page}&size=${size}`, { observe: 'response' });
0
Stefan Morcodeanu