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 애플리케이션에서 어려운 일이었습니다.

문제가 있는

한 가지 사용 사례는 웹사이트를 통해 고객 경로를 추적하는 로깅 시스템을 구현하는 것이었습니다. 이를 달성하려면 각 고객의 여정을 일관되게 추적할 수 있도록 모든 로그 항목에 상관 관계 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를 활성화하면

이제 어디서나 이벤트에 접속하실 수 있습니다.

이 상관 관계 ID를 이벤트에 전달하여 애플리케이션 어디에서나 사용할 수 있는 미들웨어를 만들 수 있습니다.

서버/미들웨어/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`
    };
  }
});

로그인 후 복사

더 이상 요청이나 매개변수를 로거에 전달할 필요가 없습니다.

이 기술을 적용하여 사용자 컨텍스트를 얻을 수 있으며 이는 일반적인 사용 사례입니다.