Contexte de requête dans Nuxt

Introduction

Nuxt a récemment introduit une fonctionnalité expérimentale : la prise en charge du contexte asynchrone à l'aide de NodeJS AsyncLocalStorage.
Cette amélioration promet de simplifier la façon dont les développeurs gèrent le contexte dans les fonctions asynchrones imbriquées, mais il y a bien plus encore !

Il est important de noter que le label « expérimental » est dû à une prise en charge limitée sur toutes les plateformes ; cependant, il est stable lors de l'utilisation de NodeJS, ce qui en fait une option fiable pour les développeurs travaillant dans cet environnement.

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

AsyncLocalStorage dans NodeJS vous permet de stocker et d'accéder aux données de manière cohérente lors d'opérations asynchrones. Il maintient un contexte, ce qui facilite la gestion des données telles que les sessions utilisateur ou les informations spécifiques à une demande.

Que résout AsyncContext ?

• Cohérence du contexte dans les opérations asynchrones : AsyncContext garantit que les données contextuelles restent accessibles tout au long de tous les appels asynchrones sans les transmettre manuellement à travers des couches de fonctions.
  
  

• Réduction du code standard : simplifie les bases de code en éliminant la logique répétitive de passage de contexte.
  
  

Maintenir un contexte de requête cohérent était un défi dans les applications NodeJS, même avant Nuxt.

La problématique

Un cas d'utilisation consistait à mettre en œuvre un système de journalisation pour suivre les parcours des clients sur notre site Web. Pour y parvenir, nous devions inclure un identifiant de corrélation avec chaque entrée de journal, afin de garantir que nous puissions retracer de manière cohérente le parcours de chaque client.

Ce problème est que lorsque vous avez plus de logique d'application avec plusieurs couches, vous devez transmettre le contexte vers ces couches.

Regardons un exemple :

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

Structure des fichiers et brouillons de code

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

Comme vous pouvez le constater, le problème est que nous transmettons à chaque couche la variable corrélationId qui est un contexte de requête, cela signifie que chaque fonction a une dépendance pour la variable corrélationId.

Imaginez maintenant si nous devons faire cela sur chaque logique d'application.

Veuillez ne pas définir ce type de logique dans une variable globale, NodeJS partagera ce contexte entre chaque requête pour chaque utilisateur.

Solution

AsyncContext peut résoudre ce problème !

Une fois que vous avez activé la fonctionnalité expérimentale asyncContext dans Nuxt.

Vous pouvez accéder à l'événement de n'importe où maintenant.

Nous pouvons créer un middleware qui transmettra ce corrélationId à l'événement pour qu'il soit disponible n'importe où dans l'application :

serveur/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

Maintenant, nous pouvons faire quelque chose comme :

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

Il n'est plus nécessaire de transmettre la requête ou un paramètre à notre enregistreur.

Nous pouvons appliquer cette technique pour obtenir un contexte utilisateur, c'est un cas d'utilisation courant.

Conclusion

AsyncContext simplifie la gestion du contexte dans les applications Nuxt, en réduisant le code passe-partout et en garantissant la cohérence entre les opérations asynchrones.

Nous pouvons aller plus loin en implémentant l'injection de dépendances pour des services comme le contexte de requête ou les services utilisateur.

Cette approche réduit le couplage et minimise les dépendances entre les couches, rendant la base de code plus modulaire, plus facile à maintenir et testable.

Lectures complémentaires

PoC disponible ici https://github.com/marc-arnoult/nuxt-demo-async-context

Pour plus de détails sur la façon d'implémenter AsyncContext et d'explorer d'autres fonctionnalités expérimentales dans Nuxt, consultez la documentation officielle.
https://nodejs.org/api/async_context.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!