当前位置：首页 > 文章列表 > 文章 > 前端 > Nuxt 中的请求上下文

Nuxt 中的请求上下文

来源：dev.to 2024-10-27 21:19:04 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Nuxt 中的请求上下文》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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

import { randomuuid } from 'crypto';
import { setcookie, getcookie } from "#imports";

export default defineeventhandler((event) => {
  // add a random correlationid to the event context
  const correlationid = getcookie(event, "correlationid") || randomuuid();
  event.context.correlationid = correlationid;

  setcookie(event, "correlationid", correlationid);
});

现在我们可以做类似的事情：

export default {
  info(message: string) {
    const { context: { correlationId } } = useEvent();
    console.log(JSON.stringify({ level: 'INFO', message, correlationId }));
  },
  error(message: string) {
    const { context: { correlationId } } = useEvent();
    console.error(JSON.stringify({ level: 'ERROR', message, correlationId }));
  }
};

不再需要将请求或参数传递给我们的记录器。

我们可以应用此技术来获取用户上下文，这是一个常见的用例。