Kontext in Nuxt anfordern

Einführung

Nuxt hat kürzlich eine experimentelle Funktion eingeführt: asynchrone Kontextunterstützung mit NodeJS AsyncLocalStorage.
Diese Verbesserung verspricht eine Vereinfachung der Art und Weise, wie Entwickler den Kontext über verschachtelte asynchrone Funktionen hinweg verwalten, aber es gibt noch mehr!

Es ist wichtig zu beachten, dass die Bezeichnung „experimentell“ auf die begrenzte Unterstützung auf allen Plattformen zurückzuführen ist; Es ist jedoch stabil, wenn NodeJS verwendet wird, was es zu einer zuverlässigen Option für Entwickler macht, die in dieser Umgebung arbeiten.

https://nuxt.com/docs/guide/going-further/experimental-features#asynccontext

AsyncLocalStorage in NodeJS ermöglicht Ihnen das konsistente Speichern und Zugreifen auf Daten über asynchrone Vorgänge hinweg. Es verwaltet einen Kontext und erleichtert die Verwaltung von Daten wie Benutzersitzungen oder anforderungsspezifischen Informationen.

Was löst AsyncContext?

• Kontextkonsistenz über asynchrone Vorgänge hinweg: AsyncContext stellt sicher, dass Kontextdaten während aller asynchronen Aufrufe zugänglich bleiben, ohne dass sie manuell durch Funktionsebenen geleitet werden müssen.
  
  

• Reduzierung des Boilerplate-Codes: Vereinfacht Codebasen durch Eliminierung sich wiederholender Kontextübergabelogik.
  
  

Die Aufrechterhaltung eines konsistenten Anforderungskontexts war in NodeJS-Anwendungen schon vor Nuxt eine Herausforderung.

Das Problematische

Ein Anwendungsfall war die Implementierung eines Protokollierungssystems zur Verfolgung der Kundenpfade durch unsere Website. Um dies zu erreichen, mussten wir jedem Protokolleintrag eine Korrelations-ID hinzufügen, um sicherzustellen, dass wir die Reise jedes Kunden konsistent verfolgen konnten.

Das Problem besteht darin, dass Sie, wenn Sie mehr Anwendungslogik mit mehreren Ebenen haben, den Kontext über diese Ebenen weitergeben müssen.

Sehen wir uns ein Beispiel an:

nuxt-demo-async-context/
├── public/
│   └── favicon.ico
├── server/
│   ├── api/
│   │   ├── index.ts
│   │   └── users.ts
│   ├── middleware/
│   │   └── correlationId.middleware.ts
│   ├── repository/
│   │   └── user.repository.ts
│   ├── service/
│   │   └── user.service.ts
│   └── utils/
│       └── logger.ts
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock

Dateistruktur und Code-Entwürfe

1. [id].ts

export default defineEventHandler((event) => {
  const id = event.context.params.id;
  const { correlationId } = event.context;
  try {
    const user = userService.getUserById(id, correlationId);
    return {
      user,
      message: `User with ID ${id} retrieved successfully`
    };
  } catch (error) {
    return {
      statusCode: 404,
      message: `User with ID ${id} not found`
    };
  }
});

1. userRepository.ts

// This would typically interact with a database
const users = new Map<string, { id: string; name: string; email: string }>();

export default {
  findById(id: string) {
    return users.get(id) || null;
  },

  save(user: { id: string; name: string; email: string }) {
    users.set(user.id, user);
    return user;
  }
};

Wie Sie sehen können, besteht das Problem darin, dass wir auf jeder Ebene die Korrelations-ID-Variable weitergeben, die einen Anforderungskontext darstellt. Das bedeutet, dass jede Funktion eine Abhängigkeit für die Korrelations-ID-Variable hat.

Stellen Sie sich nun vor, wir müssten dies für jede Anwendungslogik tun.

Bitte legen Sie diese Art von Logik nicht in einer globalen Variablen fest. NodeJS teilt diesen Kontext bei jeder Anfrage für jeden Benutzer.

Lösung

AsyncContext kann dieses Problem lösen!

Sobald Sie die experimentelle Funktion asyncContext in Nuxt aktivieren.

Sie können jetzt von überall auf die Veranstaltung zugreifen.

Wir können eine Middleware erstellen, die diese Korrelations-ID an das Ereignis weitergibt, damit sie überall in der Anwendung verfügbar ist:

server/middleware/correlationId.ts

nuxt-demo-async-context/
├── public/
│   └── favicon.ico
├── server/
│   ├── api/
│   │   ├── index.ts
│   │   └── users.ts
│   ├── middleware/
│   │   └── correlationId.middleware.ts
│   ├── repository/
│   │   └── user.repository.ts
│   ├── service/
│   │   └── user.service.ts
│   └── utils/
│       └── logger.ts
├── .gitignore
├── README.md
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock

Jetzt können wir so etwas tun:

export default defineEventHandler((event) => {
  const id = event.context.params.id;
  const { correlationId } = event.context;
  try {
    const user = userService.getUserById(id, correlationId);
    return {
      user,
      message: `User with ID ${id} retrieved successfully`
    };
  } catch (error) {
    return {
      statusCode: 404,
      message: `User with ID ${id} not found`
    };
  }
});

Es ist nicht mehr erforderlich, die Anfrage oder einen Parameter an unseren Logger weiterzuleiten.

Wir können diese Technik anwenden, um einen Benutzerkontext zu erhalten, das ist ein häufiger Anwendungsfall.

Abschluss

AsyncContext vereinfacht die Kontextverwaltung in Nuxt-Anwendungen, reduziert den Boilerplate-Code und sorgt für Konsistenz bei asynchronen Vorgängen.

Wir können noch weiter gehen, indem wir die Abhängigkeitsinjektion für Dienste wie Anforderungskontext oder Benutzerdienste implementieren.

Dieser Ansatz reduziert die Kopplung und minimiert Abhängigkeiten zwischen Schichten, wodurch die Codebasis modularer, einfacher zu warten und testbar wird.

Weiterführende Literatur

PoC verfügbar hier https://github.com/marc-arnoult/nuxt-demo-async-context

Weitere Informationen zur Implementierung von AsyncContext und zum Erkunden anderer experimenteller Funktionen in Nuxt finden Sie in der offiziellen Dokumentation.
https://nodejs.org/api/async_context.html

Das obige ist der detaillierte Inhalt vonKontext in Nuxt anfordern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!