介绍
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 databaseconst users = new map();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 })); }};
不再需要将请求或参数传递给我们的记录器。
我们可以应用此技术来获取用户上下文，这是一个常见的用例。
结论
asynccontext 简化了 nuxt 应用程序中的上下文管理，减少了样板代码并确保异步操作之间的一致性。
我们可以进一步通过为请求上下文或用户服务等服务实现依赖注入。
这种方法减少了耦合并最大限度地减少了层之间的依赖关系，使代码库更加模块化、更易于维护和可测试。
进一步阅读
poc 可在此处 https://github.com/marc-arnoult/nuxt-demo-async-context
有关如何实现 asynccontext 以及探索 nuxt 中其他实验性功能的更多详细信息，请查看官方文档。
https://nodejs.org/api/async_context.html
以上就是Nuxt 中的请求上下文的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494335.html
微信扫一扫 
支付宝扫一扫 
