Http post et get request in angular 6

Question

En version 5.2.x angulaire 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)));
 }
 

En angulaire 6, cela ne fonctionne pas.

Comment pouvons-nous faire une publication HTTP ou obtenir une demande?

Answer 1

Mise à jour : Dans angulaire 7, ils sont les mêmes que 6

Dans angulaire 6

la réponse complète trouvé en live exemple

  /** 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 l' pipeable/lettable operators qui maintenant angulaire est en mesure d'utiliser tree-shakable et de supprimer les importations et d'optimiser l'application

certains rxjs fonctions sont modifiées

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

plus dans la MIGRATION

et l'Importation des chemins

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

rxjs: méthodes de Création, les types, les planificateurs et les utilitaires

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

rxjs/opérateurs: Tous les pipeable opérateurs:

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

rxjs/webSocket: Le web socket sous réserve de la mise en œuvre

import { webSocket } from 'rxjs/webSocket';

rxjs/ajax: Le Rx ajax mise en œuvre

import { ajax } from 'rxjs/ajax';

rxjs/test: Les utilitaires de test

import { TestScheduler } from 'rxjs/testing';

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

Answer 2

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

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

La bibliothèque est appelée angulaires-extended-http-client.

angulaire-extended-http-bibliothèque client sur GitHub

angulaire-extended-http-bibliothèque client sur NGP

Très facile à utiliser.

L'approche traditionnelle

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

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

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

Fortement typées rappel approche

Vous ne vous occupez avec vos Modèles dans ces fortement typées rappels.

Par conséquent, Le reste de votre code qui ne sait à propos de vos Modèles.

Exemple d'utilisation

Fortement typées rappels sont

Succès:

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

Échec:

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

Ajouter le package de votre projet et dans votre application module

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

et dans le @NgModule importations

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

Votre Service

Dans votre Service, il vous suffit de créer params avec ces types de rappel.

Ensuite, passez-les à la HttpClientExt's la méthode get.

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 de la searchRaceInfo API appelée comme indiqué ci-dessous.

  search() {    


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

  }

À la fois, de réponse et d'erreur renvoyé dans les rappels sont fortement typés. Par exemple. la réponse est de type RacingResponse et l' erreur est APIException.

Answer 3

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

 { observe: 'response' }
 

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