Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats

Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats

Im Allgemeinen wird während des Entwicklungsprozesses der Erfolg oder Misserfolg der Schnittstellenanforderung nicht basierend auf dem HTTP-Code bestimmt, sondern das Codefeld wird basierend auf den von der Anforderung zurückgegebenen Daten hinzugefügt.

1. Vergleich der zurückgegebenen Datenformate

1. Direkt zurückgegebenes Datenformat

{
  "Ich würde": 1,
  "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "Name": "Husky 1",
  "Alter": 12,
  "Farbe": null,
  "createAt": "2019-07-25T09:13:30.000Z",
  "updateAt": "2019-07-25T09:13:30.000Z"
}

2. Daten zurückgeben, nachdem wir sie selbst verpackt haben

{
 Code: 0,
 Meldung: "Anfrage erfolgreich",
 Daten: {
  "Ich würde": 1,
  "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "Name": "Husky 1",
  "Alter": 12,
  "Farbe": null,
  "createAt": "2019-07-25T09:13:30.000Z",
  "updateAt": "2019-07-25T09:13:30.000Z"
 }
}

2. Alle Fehleranforderungen abfangen und das Rückgabeformat vereinheitlichen

1. Erstellen Sie einen Filter mit dem Befehl

Nest-GF-Filter/httpException

2. Filtercode

importieren {
 ArgumentsHost,
 Fangen,
 AusnahmeFilter,
 HttpException,
 HttpStatus,
 Logger,
} von '@nestjs/common';

@Catch(HttpException)
Exportklasse HttpExceptionFilter implementiert ExceptionFilter {
 Fang(Ausnahme: HttpException, Host: ArgumentsHost) {
  const ctx = host.switchToHttp();
  const Antwort = ctx.getResponse();
  const request = ctx.getRequest();

  const Nachricht = Ausnahme.Nachricht.Nachricht;
  Logger.log('Fehleraufforderung', Nachricht);
  const Fehlerantwort = {
   Daten: {
    Fehler: Nachricht,
   }, // Alle Fehlermeldungen abrufen message: 'Anforderung fehlgeschlagen',
   Code: 1, // benutzerdefinierter Code
   url: request.originalUrl, // falsche URL-Adresse};
  Konstantenstatus =
   Ausnahmeinstanz von HttpException
    ? Ausnahme.getStatus()
    : HttpStatus.INTERNAL_SERVER_ERROR;
  // Den zurückgegebenen Statuscode und den Anforderungsheader festlegen und Fehlerinformationen senden response.status(status);
  Antwort.header('Inhaltstyp', 'Anwendung/json; Zeichensatz=utf-8');
  Antwort.Senden(Fehlerantwort);
 }
}

3. Globale Registrierung in main.ts

...
importiere { HttpExceptionFilter } aus './filters/http-exception.filter';

asynchrone Funktion Bootstrap() {
 ...
 // Fehlerfilter global registrieren app.useGlobalFilters(new HttpExceptionFilter());
}
Bootstrap();

4. Test, zurückgegebene Fehlerinformationen

{
 "Statuscode": 400,
 "error": "Ungültige Anfrage",
 "Daten": {
  "Nachricht": [
   {
    "age": "Erforderliche Ganzzahl"
   }
  ]
 },
 "message": 'Anfrage fehlgeschlagen',
 "Code": 1,
 "URL": "/API/v1/Cat"
}

3. Vereinheitlichen Sie die Rückgabedaten einer erfolgreichen Anfrage

1. Erstellen Sie einen Interceptor src/interceptor/transform.interceptor.ts

2. Abfangcode

importieren {
 Injizierbar,
 NestInterceptor,
 Anrufbearbeiter,
 Ausführungskontext,
} von '@nestjs/common';
importiere { map } aus 'rxjs/operators';
importiere { Observable } von 'rxjs';
Schnittstelle Antwort<T> {
 Daten: T;
}
@Injizierbar()
Exportklasse TransformInterceptor<T>
 implementiert NestInterceptor<T, Response<T>> {
 abfangen(
  Kontext: Ausführungskontext,
  weiter: CallHandler<T>,
 ): Beobachtbar<Antwort<T>> {
  returniere nächsten.handle().pipe(
   Karte (Daten => {
    zurückkehren {
     Daten,
     Code: 0,
     Meldung: „Anfrage erfolgreich“,
    };
   }),
  );
 }
}

3. Globale Registrierung

...
importiere { TransformInterceptor } von './interceptor/transform.interceptor';

asynchrone Funktion Bootstrap() {
 ...
 // Global registrierter Interceptor app.useGlobalInterceptors(new TransformInterceptor());
 ...
}
Bootstrap();

4. Rückgabedaten testen

{
 "Daten": {
  "Ich würde": 1,
  "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "Name": "Husky 1",
  "Alter": 12,
  "Farbe": null,
  "createAt": "2019-07-25T09:13:30.000Z",
  "updateAt": "2019-07-25T09:13:30.000Z"
 },
 "Code": 0,
 "message": "Anfrage erfolgreich"
}

Dies ist das Ende dieses Artikels über die Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats. Weitere relevante Inhalte zum von nestjs an das Front-End zurückgegebenen Datenformat finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Beispiel einer Autorisierungsüberprüfungsmethode von Nest.js
  • Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen
  • So verwenden Sie nest.js, um mehrere statische Verzeichnisse mit Express bereitzustellen

<<:  Eine kurze Diskussion über die vorläufige Praxis der Docker-Container-Verbindung

>>:  Tutorial zur Nginx-Standortkonfiguration von Grund auf

Artikel empfehlen

Die Fallstricke beim Erlernen von Vue.js

Inhaltsverzeichnis Klasse void zeigen ES6-Pfeilfu...

Nützliche Codes zum Erstellen von Webseiten

<br />Wie kann ich die Bildlaufleiste auf de...

CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen

1. Die Eigenschaft „vertical-align“ erzielt folge...

Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

Vorwort: Wie erhält man die Koordinaten der aktue...

Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays

Inhaltsverzeichnis 1. Array.at() 2. Array.copyWit...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

JavaScript implementiert die asynchrone Übermittlung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Ja...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Detailliertes Tutorial zur Installation von Prometheus mit Docker

Inhaltsverzeichnis 1. Node Exporter installieren ...

Erläuterung der MySQL-Indexoptimierung

Bei unserer täglichen Arbeit führen wir manchmal ...

So verwenden Sie Vuex in einem Vue-Projekt

Inhaltsverzeichnis Was ist Vuex? Vuex-Nutzungszyk...

JavaScript-Grundlagen: Fehlererfassungsmechanismus

Inhaltsverzeichnis Vorwort Error-Objekt werfen ve...

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...