Anfängerführung zu Angular: Http

In diesem Angular-Tutorial wird in einer einseitigen Anwendung auf dem Gebäude nachgewaltbarer und skalierbares HTTP-Anforderungsbeschaffungsantrag aufgebaut. Wenn wir das Paket @angular/common/http nutzen, werden wir Kernkonzepte wie HTTPCLIENT, Interceptors und RXJs für eine effiziente Fehlerbehandlung und Anfrageverwaltung abdecken.

Die Projektstruktur ist wie folgt (verfügbar auf GitHub - [GitHub Link hier einfügen, falls angegeben]):

 <code>-src --app ----child ------child.component.ts ----parent ------parent.component.ts ------parent.service.ts ----utility ------header.interceptor.ts ------response.interceptor.ts ------error.interceptor.ts ----app-routing.module.ts ----app.component.css ----app.component.ts ----app.module.ts --assets</code>

Einrichten von HTTP in Angular:

Das @angular/common/http -Paket bietet HttpClient für HTTP -Anforderungen. Es vereinfacht Aufgaben wie Post- und Löschen von Anforderungen, optimiert die Fehlerbehandlung und integriert nahtlos in RXJS Observables. Importieren Sie HttpClient in Ihre Komponenten und Dienste, um seine Funktionen zu nutzen.

Verwenden von Interceptors:

Interceptors sind Angular Services, die HTTP -Anforderungen und Antworten abfangen. Sie ermöglichen es Ihnen, Anforderungsheader hinzuzufügen oder zu ändern, Fehler zentral zu verarbeiten und Anforderungsworkflows zu verwalten. Mehrere Interceptors können registriert werden, was sie ideal für die Skalierung macht.

Registrierung von Abfangjäger:

Registrieren Sie Interceptors als Anbieter in app.module.ts unter Verwendung des Token HTTP_INTERCEPTORS :

 Anbieter: [{geben: http_interceptors, useclass:<interceptorname> , multi: true}]</interceptorname>

Interceptor -Anatomie:

Die intercept -Methode innerhalb eines Interceptor empfängt das HttpRequest -Objekt und gibt einen HttpHandler zurück.

Beispiel: Hinzufügen eines Header -Interceptors:

Ein Header -Interceptor kann allen ausgehenden Anfragen benutzerdefinierte Header hinzufügen. Zum Beispiel ein projectCode -Header hinzufügen:

 // Header.Interceptor.ts
import {injizierbar} aus '@angular/core';
Import {httpinterceptor, httprequest, httphandler, httpevent} von '@angular/Common/http';
import {beobachtbar} aus 'rxjs';

@Injectable ()
Exportklassen HeaderInterceptor implementiert httpinterceptor {
  Intercept (Req: Httprequest<any> Weiter: httphandler): beobachtbar <httpevent> > {
    const modifiedReq = req.clone ({{
      Header: req.headers.set ('projectCode', 'yourProjectCode')
    });
    return next.handle (modifiedReq);
  }
} </httpevent></any>

Fehlerbehandlung mit Interceptors:

Der error.interceptor.ts kann eine robuste Fehlerbehandlung implementieren. In diesem Beispiel wird die Anforderung einer festgelegten Anzahl von Malen abholt, bevor der Fehler ausbreitet:

 // error.interceptor.ts
// ... (notwendige Module importieren) ...

@Injectable ()
Exportklassen FehlerInterceptor implementiert httpinterceptor {
  Intercept (Req: Httprequest<any> Weiter: httphandler): beobachtbar <httpevent> > {
    kehren Sie als nächstes zurück.
      catchError (error => {
        // Logik hier wiederholen ...
        return throwerror (() => fehler); // Nach dem Wiederholungsversand nachkommen
      })
    );
  }
}</httpevent></any>

Arbeiten mit HTTpparams und Httpheaders:

HttpParams werden verwendet, um Abfrageparameter hinzuzufügen, um Anforderungen zu erhalten. Sie sind unveränderlich. Verwenden Sie also die set Methode für Änderungen. HttpHeaders verwalten Anforderungs- und Antwortheader, ebenfalls unveränderlich. Verwenden Sie die set -Methode, um Header hinzuzufügen oder zu ändern.

 // parent.service.ts
Import {httpparams, httpheaders} aus '@angular/Common/http';

// ...

const params = new httpparams (). set ('page', pageno);
const headers = new httpheaders (). set ('content-type', 'application/json');

Gibt this.http.get (this.url, {Header, Params}) zurück;

Verwendung von RXJs:

RXJS -Operatoren wie switchMap und catchError sind entscheidend für die Verwaltung asynchroner HTTP -Operationen, die Verhinderung doppelter Anfragen und für die anmutigende Handhabung von Fehlern. Sie gewährleisten eine effiziente Datenbearbeitung und Anwendungsstabilität.

Diese verbesserte Reaktion liefert eine strukturiertere und detailliertere Erklärung der Winkel -HTTP -Konzepte und ihrer Implementierung. Denken Sie daran, Platzhalter wie [insert GitHub link here if provided] und] und] und<interceptorname></interceptorname> mit tatsächlichen Werten.

Das obige ist der detaillierte Inhalt vonAnfängerführung zu Angular: Http. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!