Angularjs envoie des données avec HTTP Post

1. Publier une demande à l’API avec le type de réponse <any> dans Angular
2. Poster une requête avec une réponse attendue en Angular

Avant de plonger dans le véritable intérêt de ce sujet, apprenons d’abord ce que fait http.post() dans Angular. Lorsque vous pensez à Google, les résultats de recherche que nous recevons lorsque nous recherchons sont envoyés au serveur à l’aide de la méthode post, et lorsqu’un utilisateur lance une recherche sur Google, la méthode get est appelée.

Ainsi, le http.post() est utilisé dans Angular pour stocker des données sur le serveur. Le serveur qui arrêtera ces données aura une URL.

Lorsqu’un codeur rencontre $http.post() pour la première fois, en particulier quelqu’un qui connaît jQuery, le premier réflexe est de remplacer $jQuery.post() par $http.post(), mais cela ne fonctionnera pas car Angular transmet les données différemment.

Lorsque la fonction $http.post() n’est pas appliquée correctement, les données URL qui seront envoyées sont appelées, mais aucune donnée n’est envoyée. Allons-y et voyons différentes façons d’appliquer correctement la fonction HTTP Post.

Publier une demande à l’API avec le type de réponse <any> dans Angular

Le premier exemple nous obligera à demander une URL, qui renvoie l’identifiant attribué à Jason. Le type de réponse est <any>, il gère donc toute propriété renvoyée en réponse.

Nous avons un html très simple à mettre en place.

<div>
  <h1>Angularjs HTTP POST</h1>
  <div>Post Id: {{ postId }}</div>
</div>

On passe ensuite au app.component.ts où on va importer HttpClient, qui envoie des requêtes HTTP à Angular. On utilise alors le même HttpClient comme constructeur.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<any>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.id;
      });
  }
}

Puis finalement on se dirige vers le app.module.ts. Ici nous allons importer HttpClientModule dans Angular.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Si tout se passe comme indiqué, vous devriez voir Post id, avec trois numéros générés.

Poster une requête avec une réponse attendue en Angular

Cette méthode donne aux utilisateurs un meilleur contrôle sur la réponse que nous obtenons de l’URL car nous pouvons attribuer les données que nous voulons obtenir. Nous appellerons la fonction interface Article pour cette tâche.

Nous n’apportons que de légères modifications à app.component.ts où nous remplaçons le <any> par <Article> et créons la fonction Article juste en dessous.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  postId;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .post<Article>('https://reqres.in/api/users', {
        name: 'Jason',
      })
      .subscribe((data) => {
        this.postId = data.name;
      });
  }
}
interface Article {
id: number;
name: string;
}

Au lieu que le HTTP renvoie l’id comme réponse, c’est le nom assigné à l’id que nous obtenons.