Nuxt 中的请求上下文

介绍

Nuxt 最近引入了一项实验性功能：使用 NodeJS AsyncLocalStorage 的异步上下文支持。
此增强功能有望简化开发人员跨嵌套异步函数管理上下文的方式，但还有更多！

需要注意的是，“实验性”标签是由于跨平台支持有限；但是，在使用 NodeJS 时它很稳定，使其成为在该环境中工作的开发人员的可靠选择。

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

NodeJS 中的 AsyncLocalStorage 允许您跨异步操作一致地存储和访问数据。它维护上下文，使管理用户会话或请求特定信息等数据变得更加容易。

AsyncContext 解决什么问题？

• 跨异步操作的上下文一致性：AsyncContext确保上下文数据在所有异步调用中保持可访问，而无需手动将其传递到函数层。
  
  

• 减少样板代码：通过消除重复的上下文传递逻辑来简化代码库。
  
  

维护一致的请求上下文一直是 NodeJS 应用程序中的一个挑战，甚至在 Nuxt 之前也是如此。

有问题的

一个用例是实施日志系统来跟踪客户通过我们网站的路径。为了实现这一目标，我们需要在每个日志条目中包含一个相关 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中文网其他相关文章！