Minta konteks dalam Nuxt

pengenalan

Nuxt baru-baru ini telah memperkenalkan ciri percubaan: sokongan konteks async menggunakan NodeJS AsyncLocalStorage.
Peningkatan ini menjanjikan untuk memudahkan cara pembangun mengurus konteks merentas fungsi async bersarang, tetapi terdapat lebih banyak lagi!

Perlu ambil perhatian bahawa label "percubaan" adalah disebabkan sokongan terhad merentas platform; namun, ia stabil apabila menggunakan NodeJS, menjadikannya pilihan yang boleh dipercayai untuk pembangun yang bekerja dalam persekitaran tersebut.

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

AsyncLocalStorage dalam NodeJS membolehkan anda menyimpan dan mengakses data secara konsisten merentas operasi tak segerak. Ia mengekalkan konteks, menjadikannya lebih mudah untuk mengurus data seperti sesi pengguna atau maklumat khusus permintaan.

Apakah yang AsyncContext Selesaikan?

• Ketekalan Konteks Merentas Operasi Async: AsyncContext memastikan data konteks kekal boleh diakses sepanjang semua panggilan tak segerak tanpa menghantarnya secara manual melalui lapisan fungsi.
  
  

• Mengurangkan Kod Boilerplate: Memudahkan pangkalan kod dengan menghapuskan logik penghantaran konteks berulang.
  
  

Mengekalkan konteks permintaan yang konsisten telah menjadi satu cabaran dalam aplikasi NodeJS, walaupun sebelum Nuxt.

Yang bermasalah

Satu kes penggunaan telah melaksanakan sistem pengelogan untuk menjejak laluan pelanggan melalui tapak web kami. Untuk mencapai matlamat ini, kami perlu memasukkan ID korelasi dengan setiap entri log, memastikan kami dapat mengesan perjalanan setiap pelanggan secara konsisten.

Isu ini ialah apabila anda mempunyai lebih banyak logik aplikasi dengan berbilang lapisan, anda perlu meneruskan konteks ke bawah lapisan ini.

Mari kita lihat contoh :

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

Struktur Fail dan Draf Kod

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;
  }
};

Seperti yang anda boleh, isu ini ialah kami menurunkan pada setiap lapisan pembolehubah correlationId yang merupakan konteks permintaan, ini bermakna setiap fungsi mempunyai pergantungan untuk pembolehubah correlationId.

Sekarang bayangkan jika kita perlu melakukan ini pada setiap logik aplikasi.

Sila jangan tetapkan logik jenis ini dalam pembolehubah global, NodeJS akan berkongsi konteks ini antara setiap permintaan untuk setiap pengguna.

Penyelesaian

AsyncContext boleh menyelesaikan isu ini!

Sebaik sahaja anda mengaktifkan ciri percubaan asyncContext dalam Nuxt.

Anda boleh mengakses acara dari mana-mana sahaja sekarang.

Kami boleh mencipta perisian tengah yang akan menghantar correlationId ini kepada acara untuk tersedia di mana-mana dalam aplikasi:

server/middleware/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

Kini kita boleh melakukan sesuatu seperti :

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

Tidak perlu lagi menghantar permintaan atau parameter ke pembalak kami.

Kami boleh menggunakan teknik ini untuk mendapatkan konteks pengguna, ia adalah kes penggunaan biasa.

Kesimpulan

AsyncContext memudahkan pengurusan konteks dalam aplikasi Nuxt, mengurangkan kod boilerplate dan memastikan konsistensi merentas operasi tak segerak.

Kita boleh pergi lebih jauh dengan melaksanakan suntikan pergantungan untuk perkhidmatan seperti konteks permintaan atau perkhidmatan pengguna.

Pendekatan ini mengurangkan gandingan dan meminimumkan kebergantungan antara lapisan, menjadikan pangkalan kod lebih modular, lebih mudah diselenggara dan boleh diuji.

Bacaan Selanjutnya

PoC tersedia di sini https://github.com/marc-arnoult/nuxt-demo-async-context

Untuk mendapatkan butiran lanjut tentang cara melaksanakan AsyncContext dan meneroka ciri percubaan lain dalam Nuxt, lihat dokumentasi rasmi.
https://nodejs.org/api/async_context.html

Atas ialah kandungan terperinci Minta konteks dalam Nuxt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!