Nuxt でのリクエストコンテキスト

導入

Nuxt は最近、NodeJS AsyncLocalStorage を使用した非同期コンテキストのサポートという実験的な機能を導入しました。
この機能強化により、開発者がネストされた非同期関数全体でコンテキストを管理する方法が簡素化されることが約束されていますが、それだけではありません!

「実験的」というラベルは、プラットフォーム間でのサポートが制限されているためであることに注意することが重要です。ただし、NodeJS を使用する場合は安定しているため、その環境内で作業する開発者にとって信頼できるオプションになります。

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

NodeJS の AsyncLocalStorage を使用すると、非同期操作全体で一貫してデータを保存し、アクセスできます。コンテキストを維持することで、ユーザー セッションやリクエスト固有の情報などのデータの管理が容易になります。

AsyncContext は何を解決しますか?

• 非同期操作全体にわたるコンテキストの一貫性: AsyncContext は、関数のレイヤーを手動で渡すことなく、すべての非同期呼び出しを通じてコン​​テキスト データにアクセスできる状態を維持します。
  
  

• 定型コードの削減: コンテキスト受け渡しロジックの繰り返しを排除することで、コードベースを簡素化します。
  
  

Nuxt 以前でさえ、NodeJS アプリケーションでは、一貫したリクエスト コンテキストを維持することが課題でした。

問題のある

使用例の 1 つは、Web サイト内の顧客の経路を追跡するためのログ システムの実装でした。これを達成するには、すべてのログ エントリに相関 ID を含めて、各顧客のジャーニーを一貫して追跡できるようにする必要がありました。

この問題は、複数のレイヤーを持つより多くのアプリケーション ロジックがある場合、これらのレイヤーにコンテキストを渡さなければならないことです。

例を見てみましょう:

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

ファイル構造とコード ドラフト

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

これでわかるように、問題はリクエスト コンテキストである correlationId 変数をすべてのレイヤーに渡していることです。これは、すべての関数が correlationId 変数に依存していることを意味します。

次に、すべてのアプリケーション ロジックでこれを行う必要があるかどうかを想像してください。

この種のロジックをグローバル変数に設定しないでください。NodeJS は、すべてのユーザーのすべてのリクエスト間でこのコンテキストを共有します。

解決

AsyncContext でこの問題を解決できます !

Nuxt で実験的機能 asyncContext を有効にすると。

どこからでもイベントにアクセスできるようになりました。

この correlationId をイベントに渡してアプリケーション内のどこでも利用できるようにするミドルウェアを作成できます。

サーバー/ミドルウェア/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

これで次のようなことができるようになります:

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

リクエストやパラメータをロガーに渡す必要はなくなりました。

この手法を適用してユーザー コンテキストを取得できます。これは一般的な使用例です。

結論

AsyncContext は、Nuxt アプリケーションのコンテキスト管理を簡素化し、ボイラープレート コードを削減し、非同期操作間の一貫性を確保します。

リクエストコンテキストやユーザーサービスなどのサービスに依存関係注入を実装することで、さらに前進することができます。

このアプローチにより、レイヤー間の結合が軽減され、依存関係が最小限に抑えられるため、コードベースがよりモジュール化され、保守が容易になり、テストが容易になります。

さらに読む

PoC はこちらから入手可能 https://github.com/marc-arnoult/nuxt-demo-as​​ync-context

AsyncContext を実装し、Nuxt で他の実験的な機能を探索する方法の詳細については、公式ドキュメントを確認してください。
https://nodejs.org/api/async_context.html

以上がNuxt でのリクエストコンテキストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。