Angularjs sendet Daten mit HTTP Post

1. Post-Anfrage an API mit Antworttyp <any> in Angular
2. Post-Request mit erwarteter Antwort in Angular

Bevor wir in den eigentlichen Punkt dieses Themas eintauchen, lassen Sie uns zuerst lernen, was http.post() in Angular macht. Wenn Sie an Google denken, werden die Suchergebnisse, die wir bei der Suche erhalten, mit der Methode post an den Server gesendet, und wenn ein Benutzer eine Suche bei Google initiiert, wird die Methode get aufgerufen.

So wird in Angular das http.post() verwendet, um Daten auf dem Server zu speichern. Der Server, der diese Daten stoppt, hat eine URL.

Wenn ein Programmierer zum ersten Mal auf $http.post() stößt, insbesondere jemand mit jQuery-Kenntnissen, ist der erste Instinkt, $jQuery.post() durch $http.post() zu ersetzen, aber das funktioniert nicht, weil Angular Daten anders überträgt.

Wenn die Funktion $http.post() nicht korrekt angewendet wird, werden die zu sendenden URL-Daten aufgerufen, aber es werden keine Daten gesendet. Lassen Sie uns fortfahren und verschiedene Möglichkeiten sehen, die HTTP-Post-Funktion richtig anzuwenden.

Post-Anfrage an API mit Antworttyp <any> in Angular

Beim ersten Beispiel müssen wir eine URL anfordern, die die ID zurückgibt, die Jason zugewiesen ist. Der Antworttyp ist <any>, sodass alle Eigenschaften verarbeitet werden, die als Antwort zurückgesendet werden.

Wir haben ein sehr einfaches html zum Einrichten.

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

Wir wechseln dann zu app.component.ts, wo wir HttpClient importieren, der HTTP-Anfragen an Angular sendet. Wir verwenden dann denselben HttpClient als Konstruktor.

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

Dann geht es schliesslich weiter zum app.module.ts. Hier importieren wir HttpClientModule in 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 { }

Wenn alles wie angegeben läuft, sollten Sie die Post-ID mit drei generierten Zahlen sehen.

Post-Request mit erwarteter Antwort in Angular

Diese Methode gibt Benutzern eine bessere Kontrolle über die Antwort, die wir von der URL erhalten, da wir die gewünschten Daten zuweisen können. Wir nennen für diese Aufgabe die Funktion interface Article.

Wir nehmen nur geringfügige Änderungen an der app.component.ts vor, wo wir <any> durch <Article> ersetzen und direkt darunter die Funktion Article erstellen.

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

Anstatt dass HTTP die ID als Antwort zurückgibt, erhalten wir den der ID zugewiesenen Namen.