Async Local Storage ist hier, um Ihnen zu helfen

Was fällt Ihnen ein, wenn Sie den Begriff „Async Local Storage“ hören? Man könnte zunächst denken, dass es sich um eine magische Implementierung des browserbasierten lokalen Speichers handelt. Diese Annahme ist jedoch falsch. Async Local Storage ist weder browserbezogen noch ein typischer Speichermechanismus. Wahrscheinlich nutzen eine oder zwei Bibliotheken, die Sie verwendet haben, es unter der Haube. In vielen Fällen kann Ihnen diese Funktion den Umgang mit unordentlichem Code ersparen.

Was ist asynchroner lokaler Speicher?

Async Local Storage ist eine in Node.js eingeführte Funktion, die zunächst in den Versionen v13.10.0 und v12.17.0 hinzugefügt und später in v16.4.0 stabilisiert wurde. Es ist Teil des async_hooks-Moduls, das eine Möglichkeit bietet, asynchrone Ressourcen in Node.js-Anwendungen zu verfolgen. Die Funktion ermöglicht die Erstellung eines gemeinsamen Kontexts, auf den mehrere asynchrone Funktionen zugreifen können, ohne ihn explizit zu übergeben. Der Kontext ist in jeder (und einzigen) Operation verfügbar, die innerhalb des Rückrufs ausgeführt wird, der an die run()-Methode der AsyncLocalStorage-Instanz übergeben wird.

Ein Muster für die Verwendung von AsyncLocalStorage

Bevor wir uns mit den Beispielen befassen, erklären wir das Muster, das wir verwenden werden.

Initialisierung

import { AsyncLocalStorage } from "async_hooks";
import { Context } from "./types";

export const asyncLocalStorage = new AsyncLocalStorage<context>();

// export const authAsyncLocalStorage = new AuthAsyncLocalStorage<authcontext>()
</authcontext></context>

Im obigen Modul initialisieren wir eine Instanz von AsyncLocalStorage und exportieren sie als Variable.

Nutzung

asyncLocalStorage.run({ userId }, async () => {
  const usersData: UserData = await collectUsersData();
  console.log("usersData", usersData);
});

// (method) AsyncLocalStorage<unknown>.run<promise>>(store: unknown, callback: () => Promise<void>): Promise<void> (+1 overload)
</void></void></promise></unknown>

Die run()-Methode benötigt zwei Argumente: Speicher, der die Daten enthält, die wir teilen möchten, und Rückruf, wo wir unsere Logik platzieren. Dadurch wird der Speicher bei jedem Funktionsaufruf innerhalb des Rückrufs zugänglich, was eine nahtlose Datenfreigabe über asynchrone Vorgänge hinweg ermöglicht.

async function collectUsersData() {
  const context = asyncLocalStorage.getStore();
}

Um auf den Kontext zuzugreifen, importieren wir unsere Instanz und rufen die Methode asyncLocalStorage.getStore() auf. Das Tolle ist, dass der von getStore() abgerufene Speicher typisiert ist, weil wir den Kontexttyp während der Initialisierung an AsyncLocalStorage übergeben haben: new AsyncLocalStorage().

Async Local Storage als Authentifizierungskontext

Es gibt keine Webanwendung ohne Authentifizierungssystem. Wir müssen Authentifizierungstoken validieren und Benutzerinformationen extrahieren. Sobald wir die Benutzeridentität erhalten haben, möchten wir sie in den Routenhandlern verfügbar machen und vermeiden, dass der Code in jedem einzelnen Handler dupliziert wird. Sehen wir uns an, wie wir AsyncLocalStorage nutzen können, um einen Authentifizierungskontext zu implementieren und gleichzeitig unseren Code sauber zu halten.

Ich habe mich für dieses Beispiel für fastify entschieden.

Laut der Dokumentation ist Fastify:

Schnelles Web-Framework mit geringem Overhead für Node.js

Okay, fangen wir an:

1. Fastify installieren:

import { AsyncLocalStorage } from "async_hooks";
import { Context } from "./types";

export const asyncLocalStorage = new AsyncLocalStorage<context>();

// export const authAsyncLocalStorage = new AuthAsyncLocalStorage<authcontext>()
</authcontext></context>

1. Typ für unseren Authentifizierungskontext definieren:

asyncLocalStorage.run({ userId }, async () => {
  const usersData: UserData = await collectUsersData();
  console.log("usersData", usersData);
});

// (method) AsyncLocalStorage<unknown>.run<promise>>(store: unknown, callback: () => Promise<void>): Promise<void> (+1 overload)
</void></void></promise></unknown>

1. Initialisieren Sie eine Instanz von AsyncLocalStorage, weisen Sie sie einer Variablen zu und exportieren Sie die Variable. Denken Sie daran, den relevanten Typ zu übergeben: new AsyncLocalStorage().

async function collectUsersData() {
  const context = asyncLocalStorage.getStore();
}

1. Initialisieren Sie eine Fastify-Instanz und fügen Sie ein Dienstprogramm zur Fehlerbehandlung hinzu:

npm install fastify

Jetzt kommt der sehr wichtige Teil. Wir werden einen onRequest-Hook hinzufügen, um Handler mit der Methode authAsyncLocalStorage.run() zu umschließen.

type Context = Map;

Nach erfolgreicher Validierung rufen wir die run()-Methode aus unserem authAsyncLocalStorage auf. Als Speicherargument übergeben wir den Authentifizierungskontext mit der aus dem Token abgerufenen Benutzer-ID. Im Rückruf rufen wir die Funktion done auf, um mit dem Fastify-Lebenszyklus fortzufahren.

Wenn wir Authentifizierungsprüfungen haben, die asynchrone Vorgänge erfordern, sollten wir diese zum Rückruf hinzufügen. Dies liegt laut Dokumentation daran:

Der Fertig-Rückruf ist nicht verfügbar, wenn async/await verwendet oder ein Promise zurückgegeben wird. Wenn Sie in dieser Situation einen Fertig-Rückruf aufrufen, kann es zu unerwartetem Verhalten kommen, z. B. Doppelter Aufruf von Handlern

Hier ist ein Beispiel, wie das aussehen könnte:

import { AsyncLocalStorage } from "async_hooks";
import { Context } from "./types";

export const authAsyncLocalStorage = new AsyncLocalStorage<context>();
</context>

Unser Beispiel hat nur eine geschützte Route. In komplexeren Szenarien müssen Sie möglicherweise nur bestimmte Routen mit dem Authentifizierungskontext umschließen. In solchen Fällen können Sie entweder:

1. Wickeln Sie den onRequest-Hook in ein benutzerdefiniertes Plugin ein, das nur auf bestimmte Routen angewendet wird.
2. Routenunterscheidungslogik innerhalb des onRequest-Hooks selbst hinzufügen.

In Ordnung, unser Kontext ist festgelegt und wir können jetzt eine geschützte Route definieren:

import Fastify from "fastify";

/* other code... */

const app = Fastify();

function sendUnauthorized(reply: FastifyReply, message: string) {
  reply.code(401).send({ error: `Unauthorized: ${message}` });
}

/* other code... */

Der Code ist ziemlich einfach. Wir importieren authAsyncLocalStorage, rufen die Benutzer-ID ab, initialisieren UserRepository und rufen Daten ab. Dieser Ansatz sorgt dafür, dass der Routenbearbeiter sauber und konzentriert bleibt.

Erkunden, wie Next.js Async Local Storage verwendet

In diesem Beispiel implementieren wir den Cookies-Helfer von Next.js erneut. Aber warten Sie – das ist ein Beitrag über AsyncLocalStorage, oder? Warum reden wir also über Cookies? Die Antwort ist einfach: Next.js verwendet AsyncLocalStorage, um Cookies auf dem Server zu verwalten. Deshalb ist das Lesen eines Cookies in einer Serverkomponente so einfach wie:

import Fastify from "fastify";
import { authAsyncLocalStorage } from "./context";
import { getUserIdFromToken, validateToken } from "./utils";

/* other code... */

app.addHook(
  "onRequest",
  (request: FastifyRequest, reply: FastifyReply, done: () => void) => {
    const accessToken = request.headers.authorization?.split(" ")[1];
    const isTokenValid = validateToken(accessToken);
    if (!isTokenValid) {
      sendUnauthorized(reply, "Access token is invalid");
    }
    const userId = accessToken ? getUserIdFromToken(accessToken) : null;

    if (!userId) {
      sendUnauthorized(reply, "Invalid or expired token");
    }
    authAsyncLocalStorage.run(new Map([["userId", userId]]), async () => {
      await new Promise((resolve) => setTimeout(resolve, 2000));
      sendUnauthorized(reply, "Invalid or expired token");
      done();
    });
  },
);

/* other code... */

Wir verwenden die aus next/headers exportierte Cookies-Funktion, die verschiedene Methoden zur Verwaltung von Cookies bietet. Doch wie ist das technisch möglich?

Jetzt ist es an der Zeit, mit der Neuimplementierung zu beginnen.

Zuerst möchte ich erwähnen, dass dieses Beispiel auf den Erkenntnissen basiert, die ich durch ein großartiges Video von Lee Robinson und durch das Eintauchen in das Next.js-Repository gewonnen habe.

In diesem Beispiel verwenden wir Hono als unser Server-Framework. Ich habe mich aus zwei Gründen dafür entschieden:

1. Ich wollte es einfach mal ausprobieren.
2. Es bietet solide Unterstützung für JSX.

Hono zuerst installieren:

import { AsyncLocalStorage } from "async_hooks";
import { Context } from "./types";

export const asyncLocalStorage = new AsyncLocalStorage<context>();

// export const authAsyncLocalStorage = new AuthAsyncLocalStorage<authcontext>()
</authcontext></context>

Jetzt initialisieren Sie Hono und fügen Sie Middleware hinzu:

asyncLocalStorage.run({ userId }, async () => {
  const usersData: UserData = await collectUsersData();
  console.log("usersData", usersData);
});

// (method) AsyncLocalStorage<unknown>.run<promise>>(store: unknown, callback: () => Promise<void>): Promise<void> (+1 overload)
</void></void></promise></unknown>

Der Code ähnelt der Middleware aus dem Fastify-Beispiel, oder? Um den Kontext festzulegen, verwenden wir setCookieContext, das aus dem Cookies-Modul importiert wird – unserer benutzerdefinierten einfachen Implementierung der Cookies-Funktion. Folgen wir der Funktion setCookieContext und navigieren wir zu dem Modul, aus dem sie importiert wurde:

async function collectUsersData() {
  const context = asyncLocalStorage.getStore();
}

Die Funktion setCookieContext (deren Rückgabewert wir in der Hono-Middleware an cookieAsyncLocalStorage.run() übergeben haben) extrahiert Cookies aus dem c-Parameter, der den Hono-Kontext darstellt, und bündelt sie mit Abschlüssen, die Hilfsfunktionen zum Verwalten von Cookies bereitstellen.

Unsere Cookies-Funktion repliziert die Funktionalität der Cookies von next/headers. Es nutzt die Methode cookieAsyncLocalStorage.getStore(), um auf denselben Kontext zuzugreifen, der beim Aufruf an cookieAsyncLocalStorage.run() übergeben wird.

Wir haben die Rückkehr unserer Cookies-Funktion in ein Versprechen verpackt, das Verhalten der Next.js-Implementierung nachzuahmen. Vor Version 15 war diese Funktion synchron. Nun werden im aktuellen Next.js-Code die von den Cookies zurückgegebenen Methoden an ein Promise-Objekt angehängt, wie im folgenden vereinfachten Beispiel gezeigt:

npm install fastify

Ein weiterer erwähnenswerter Punkt ist, dass in unserem Fall die Verwendung von Cookies.setCookie und Cookies.deleteCookie immer einen Fehler auslöst, ähnlich dem Verhalten, das in Next.js beim Setzen von Cookies in einer Serverkomponente beobachtet wird. Wir haben diese Logik fest codiert, da in der ursprünglichen Implementierung die Verwendung von setCookie oder deleteCookie von der Phase(WorkUnitPhase)-Eigenschaft abhängt, die im Speicher namens RequestStore gespeichert ist (dies ist die Implementierung von AsyncLocalStorage und speichert auch Cookies). Dieses Thema eignet sich jedoch besser für einen anderen Beitrag. Um dieses Beispiel einfach zu halten, lassen wir die Simulation von WorkUnitPhase weg.

Jetzt müssen wir unseren React-Code hinzufügen.

1. Fügen Sie die App-Komponente hinzu:

type Context = Map;

1. Fügen Sie eine Komponente zum Verwalten von Cookies hinzu:

import { AsyncLocalStorage } from "async_hooks";
import { Context } from "./types";

export const authAsyncLocalStorage = new AsyncLocalStorage<context>();
</context>

Die Verwendung von Cookies ähnelt der Verwendung in Next.js React-Serverkomponenten.

1. Fügen Sie einen Routenhandler hinzu, um die Vorlage zu rendern:

import Fastify from "fastify";

/* other code... */

const app = Fastify();

function sendUnauthorized(reply: FastifyReply, message: string) {
  reply.code(401).send({ error: `Unauthorized: ${message}` });
}

/* other code... */

Unsere Vorlage wird mit der HTML-Methode aus dem Hono-Kontext gerendert. Der entscheidende Punkt hierbei ist, dass der Routenhandler innerhalb der asyncLocalStorage.run()-Methode ausgeführt wird, die cookieContext verwendet. Dadurch können wir über die Cookies-Funktion auf diesen Kontext in der DisplayCookies-Komponente zugreifen.

Es ist nicht möglich, Cookies innerhalb von React-Serverkomponenten zu setzen, daher müssen wir dies manuell tun:

Lassen Sie uns eine Seite aktualisieren:

Und hier sind wir, unsere Cookies wurden erfolgreich abgerufen und angezeigt.

Schlussfolgerungen

Es gibt viele weitere Anwendungsfälle für asyncLocalStorage. Mit dieser Funktion können Sie benutzerdefinierte Kontexte in nahezu jedem Server-Framework erstellen. Der asyncLocalStorage-Kontext ist in die Ausführung der run()-Methode gekapselt, was die Verwaltung erleichtert. Es eignet sich perfekt für die Bearbeitung anforderungsbasierter Szenarien. Die API ist einfach und flexibel und ermöglicht Skalierbarkeit durch die Erstellung von Instanzen für jeden Status. Es ist möglich, separate Kontexte für Dinge wie Authentifizierung, Protokollierung und Feature-Flags nahtlos zu verwalten.

Trotz seiner Vorteile gibt es einige Dinge zu beachten. Ich habe Meinungen gehört, dass asyncLocalStorage zu viel „Magie“ in den Code einbringt. Ich gebe zu, dass es einige Zeit gedauert hat, bis ich das Konzept vollständig verstanden habe, als ich diese Funktion zum ersten Mal verwendet habe. Beachten Sie außerdem, dass durch das Importieren des Kontexts in ein Modul eine neue Abhängigkeit entsteht, die Sie verwalten müssen. Letztendlich ist es jedoch viel schlimmer, Werte über tief verschachtelte Funktionsaufrufe zu übergeben.

Danke fürs Lesen und bis zum nächsten Beitrag!?

PS: Die Beispiele (plus einen Bonus) finden Sie hier

Bog-Post-Quelle: https://www.aboutjs.dev/en/async-local-storage-is-here-to-help-you

Das obige ist der detaillierte Inhalt vonAsync Local Storage ist hier, um Ihnen zu helfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!