Nuxt でのリクエストコンテキスト-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-26 06:39:02

オリジナル

362 人が閲覧しました

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

ログイン後にコピー

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

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